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
297 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Geolocation works...sometimes 2 40
Loading Self-Hosted Fonts 12 43
Anchor Bookmark 6 34
Pass a js value to an html form 5 42
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

738 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