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
290 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

895 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

18 Experts available now in Live!

Get 1:1 Help Now