Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
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
Medium Priority
?
300 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 2000 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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)

730 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