Image Fading effect

[Olly79]

Hi all,

Just wondering if someone can help me code the following.

I want to use a fading effect to rotate a series of images (7 in total), within the CSS and code already defined below:

<style="text/css">
.rotate {float: left;width: 160px;height: 215px;background-color: #FFFFFF;border: 2px solid #0066CC;margin: 0px 10px 10px 0px;text-align: center;overflow: hidden;}
</style>


<div class="rotate">
    <span>
        <a href="#">
            <img border="0" src="/images/catimage.jpg" width="160" height="160" alt="" class="" />
        </a>
    </span>
    <div onclick="javascript:document.location.href='/';">
        <a href="/">BRANDS</a>
    </div>
</div>

I came across the following script:

<script type="text/javascript">

function theRotator() {
	//Set the opacity of all images to 0
	$('div#rotator ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$('div#rotator ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotate()',6000);
	
}

function rotate() {	
	//Get the first image
	var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div#rotator ul li:first') :current.next()) : $('div#rotator ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};

$(document).ready(function() {		
	//Load the slideshow
	theRotator();
});

</script>


<div id="rotator">
  <ul>
    <li class="show">
    <a href="javascript:void(0)">
    <img src="images/image-1.jpg" width="500" height="313"  alt="pic1" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-2.jpg" width="500" height="313"  alt="pic2" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-3.jpg" width="500" height="313"  alt="pic3" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/image-4.jpg" width="500" height="313"  alt="pic4" />
    </a>
    </li>
  </ul>
</div>


The CSS

/* rotator in-page placement */
    div#rotator {
	position:relative;
	height:345px;
	margin-left: 15px;
}
/* rotator css */
	div#rotator ul li {
	float:left;
	position:absolute;
	list-style: none;
}
/* rotator image style */	
	div#rotator ul li img {
	border:1px solid #ccc;
	padding: 4px;
	background: #FFF;
}
    div#rotator ul li.show {
	z-index:500;
}

Can someone assist me in coding this as a solution based on my orginal HTML and CSS above as I have tried to amend this script; however, it's not right and I could really do with some help.

Many thanks

[kows]

what exactly is the problem?

after a quick glance, the code all looks fine -- I do hope you know that you have to be loading the jQuery framework in order for this to work, though.

[Olly79]

Hi,

I'm stuggling with aligning the CSS on the script with what is already in place:

<style="text/css">
.rotate {float: left;width: 160px;height: 215px;background-color: #FFFFFF;border: 2px solid #0066CC;margin: 0px 10px 10px 0px;text-align: center;overflow: hidden;}
</style>

and would appreciate some assitance please.

[kows]

.rotate {
	position:relative;
	height:345px;
	margin-left: 15px;
}
/* rotator css */
.rotate span {
	display: block;
	float:left;
	position:absolute;
}
/* rotator image style */	
.rotate span img {
	border:1px solid #ccc;
	padding: 4px;
	background: #FFF;
}
.rotate span.show {
	z-index:500;
}

you have to modify the jQuery selectors, though, too. change any "#rotator" references to ".rotate" and change any "ul li" references to your "span." add your other CSS to the rotate class.

[Olly79]

Hi,

This is what I have at present:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">

		function theRotator() {
			//Set the opacity of all images to 0
			$('.rotator ul li').css({opacity: 0.0});
			
			//Get the first image and display it (gets set to full opacity)
			$('.rotator ul li:first').css({opacity: 1.0});
				
			//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
			setInterval('rotate()',6000);
			
		}
		
		function rotate() {	
			//Get the first image
			var current = ($('.rotator ul li.show')?  $('.rotator ul li.show') : $('.rotator ul li:first'));
		
			//Get next image, when it reaches the end, rotate it back to the first image
			var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.rotator ul li:first') :current.next()) : $('.rotator ul li:first'));	
			
			//Set the fade in effect for the next image, the show class has higher z-index
			next.css({opacity: 0.0})
			.addClass('show')
			.animate({opacity: 1.0}, 1000);
		
			//Hide the current image
			current.animate({opacity: 0.0}, 1000)
			.removeClass('show');
			
		};
		
		$(document).ready(function() {		
			//Load the slideshow
			theRotator();
		});
		</script>

        <!-- CSS for this block -->
        <style type="text/css">
		.rotate {
			/*position:relative;
			height:345px;
			margin-left: 15px;*/
			/*additional CSS elements*/
			float: left;
			width: 160px;
			height: 215px;
			background-color: #FFFFFF;
			border: 2px solid #0066CC;
			margin: 0px 10px 10px 0px;
			text-align: center;
			overflow: hidden;
			
		}
		/* rotator css */
		.rotate span {
			display: block;
			float:left;
			position:absolute;
		}
		/* rotator image style */	
		.rotate span img {
			border:1px solid #ccc;
			padding: 4px;
			background: #FFF;
		}
		.rotate span.show {
			z-index:500;
		}
		</style>
        <!-- /CSS for this block -->
        
        <div class="rotate">
			<span>
				<a href="/">
					<img border="0" src="http://www.somedomain.com/image1.jpg" width="160" height="160" alt="" class="" />
				</a>
                <a href="/">
					<img border="0" src="http://www.somedomain.com/image2.jpg" width="160" height="160" alt="" class="" />
				</a>
			</span>
			<!--<div onclick="javascript:document.location.href='/';">
				<a href="/">BRANDS</a>
			</div>-->
		</div>

The alignement is out and I simply have two images within that block side by side and nothing is rotating...any thoughts on what I need to do further please?

[kows]

well, you didn't follow the instructions I gave you about updating the jQuery selectors, so of course nothing is going to work. the jQuery can't find any of the elements it's looking for, because you're using a different HTML structure.

your HTML structure is not correct, though, anyway. you can't have more than one image per span (unless you change the mark up and selectors so that it no longer looks for spans, and looks for anchors instead). the original structure was like:

<div id="rotator">
  <ul>
    <li><img /></li>
    <li><img /></li>
    <li><img /></li>
  </ul>
</div>

and so your structure must be somewhat similar (this is what I changed your CSS to work with) -- I've just omitted the anchor tags, they are fine if you keep them there:

<div class="rotate">
  <span><img /></span>
  <span><img /></span>
  <span><img /></span>
</div>

if you're not going to do that, get rid of the <span> altogether and change the mark-up for <span>s to apply to <a>nchors.

[Olly79]

Hi,

Apologies I had applied it; however, I hadn't pasted the correct code here!

Anyhow here is what I now have:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

function theRotator() {
//Set the opacity of all images to 0
$('.rotator span').css({opacity: 0.0});

//Get the first image and display it (gets set to full opacity)
$('.rotator span:first').css({opacity: 1.0});

//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('rotate()',6000);

}

function rotate() {
//Get the first image
var current = ($('.rotator span.show')? $('.rotator span.show') : $('.rotator span:first'));

//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.rotator span:first') :current.next()) : $('.rotator span:first'));

//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

};

$(document).ready(function() {
//Load the slideshow
theRotator();
});
</script>

<!-- CSS for this block -->
<style type="text/css">
.rotate {
position:relative;
/*height:345px;
margin-left: 15px;*/
/*additional CSS elements*/
float: left;
width: 160px;
height: 215px;
background-color: #FFFFFF;
border: 2px solid #0066CC;
margin: 0px 10px 10px 0px;
/*text-align: center;*/
overflow: hidden;

}
/* rotator css */
.rotate span {
display: block;
float:left;
position:absolute;
}
/* rotator image style */
.rotate span img {
border:1px solid #ccc;
padding: 4px;
background: #FFF;
}
.rotate span.show {
z-index:500;
}
</style>
<!-- /CSS for this block -->

<div class="rotate">
<span><a href="/"><img border="0" src="http://www.somedoamin.com/image1.jpg" width="160" height="160" alt="" class="" /></a></span>
<span><a href="/"><img border="0" src="http://www.somedoamin.com/image2.jpg" width="160" height="160" alt="" class="" /></a></span>
<div onclick="javascript:document.location.href='/';">
<a href="/">SOMETITLE</a>
</div>
</div>

The alignement of the image is now perfect; however, nothing is happening? Can you please help me further.

Thanks

[SambaNeko]

Seems like you didn't read and follow kows' instructions properly:

you have to modify the jQuery selectors, though, too. change any "#rotator" references to ".rotate"

You're still using the wrong selector; change all ".rotator" in jQuery to ".rotate".

[Olly79]

Hi,

Yes, that was my silly mistake!

Okay, that is fine now; however, due to the fact that I have 100+ URLs can anyone assist me with loading the URL's dynamically into the DIV?

Thanks

[kows]

if you want to continue using jQuery, you could create a JSON file storing all of the URLs and associated images and then load that file using an AJAX call, and then loop through the URLs and add them all to your <div>. but, you could also just use a server-side language like PHP to load them all, too.

if you go the JSON route, you can make a JavaScript object like so (you could also use a language like PHP to create this object for you based on a database):

{"urls": [
          "http://example.com"
         ,"http://example.net"
         ,"http://example.org"
         ]
,"imgs": [
          "url1.jpg"
         ,"url2.jpg"
         ,"url3.jpg"
         ]
}

that object should be placed in its own file, like urls.json.

we can then use jQuery later to clone a template of the mark-up you want to use. so, we create all of the tags like normal, and fill in the necessary attributes to have valid XHTML:

<div id="rotate">
  <span><a href="#"><img src="#" alt="" /></a></span>
</div>

then, you can use the getJSON() method to request your JSON file, and loop through the urls and imgs arrays. then, you remove the empty template at the end:

$(document).ready(function(){

  // Get the JSON file using AJAX.
  $.getJSON('urls.json', function(data){

    // If either of these are undefined, something went wrong.
    if(data.urls !== undefined && data.imgs !== undefined){
      
      // data now holds an array of URLs and images
      for(var i = 0; i < data.urls.length; i++){
        
        // Clone the template
        var temp = $('#rotate span:first').clone();
        
        // Replace anchor's HREF attribute
        temp.find('a').attr('href', data.urls[i]);
        
        // Replace image's SRC attribute
        temp.find('img').attr('src', data.imgs[i]);
        
        // Add to rotate container
        temp.appendTo('#rotate');
        
      }
      
      // Remove the template
      $('#rotate span:first').remove();
      
    }else{
      alert('some error');
    }
  });
});