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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
I thought I had multiple sliders on one page working properly . . . I don't. 10 16
Insert Button on a table 16 38
Html value of radio 14 29
Using Specialized Fonts in CSS 1 24
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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.…

829 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