Solved

How do I add a div ( so that I may add a static menu) over this Javascript rotating images script?

Posted on 2014-07-26
3
289 Views
Last Modified: 2014-07-26
Hello Experts,

I found this nifty little code for a Javascript rotating images.
The idea was to have the background images change images ( using the script above ) while a static div holding text and links remain over the changing images.

The thing is whatever div I try to place over the rotating images, the div with text disappears and then reappears while the images change.

I don't mind using another approach at all for reaching the same result where the background images rotate whether on a div or a cell and static links remain over them.

I attached the css, js and images files if needed,

Thank you in advance.

Sample index page
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Infinite Rotating Images Using jQuery (JavaScript)</title>
		<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1'></script>    
		<script type='text/javascript' src='js/infinite-rotator.js'></script>		
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  </head>
  <body>
    <h1>Infinite Rotating Images Using jQuery (JavaScript)</h1>
    <!-- START: Rotating Images -->
		<div id="rotating-item-wrapper">
			<img src="images/greenpeople.jpg" alt="a person entering a building" class="rotating-item" width="980" height="347" />
      <img src="images/entrance.jpg" alt="photo of building across from our office" class="rotating-item" width="980" height="347" />
      <img src="images/bluepeople.jpg" alt="building entrance with neon backlit walls" class="rotating-item" width="980" height="347" />
      <img src="images/reflection3.jpg" alt="building lobby window reflections" class="rotating-item" width="980" height="347" />
      <img src="images/reflection2.jpg" alt="reflection on building windows" class="rotating-item" width="980" height="347" />
      <img src="images/manequine.jpg" alt="two manequines in window" class="rotating-item" width="980" height="347" />    
			<p style="display:none;">Source code and instructions at: <a href="http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/">Infinite Loop: Rotating Images Using jQuery (JavaScript)</a><br/>by <a href="http://trendmedia.com/">San Francisco WordPress website designers and developers - TrendMedia</a></p>
		</div>
		<!-- END: Rotating images images -->
  </body>
</html>

Open in new window

infinite-rotator.js
style.css
images.zip
0
Comment
Question by:colonelblue
3 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40221479
That code is 4 years old and uses a very old version of jquery (1.4.2)  It is probably incompatible with virtually everything modern.  I would suggest you contact Tren Media to see if there is a more current version or at least try it with a current jquery library.  If you put it in a page as is, you will end up with all kinds of compatibility and conflict issues.

Cd&
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40221500
As Cd& said, old
So many nice slider plugins you can use these days, a popular one is
http://wowslider.com/
And you can add in any fancy text animations.

But to fix your code add this to the .rotating-item {} class

z-index: -1;

Then you can add your div into the rotating-item-wrapper div
0
 

Author Closing Comment

by:colonelblue
ID: 40221793
Thank you Gary!
Virtual Duff Keg. :)
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now