So I have a very long question for my code. Here are my requirements:
- Using jQuery
- XML parsing of images
- Must be a slide show
- Opacity on hover and show text in whiter full opacity
With these piece i built this code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
a{text-decoration:none; color:#fff;}
.pics img { border:0;}
.pics span{display:none;background:#000;position:absolute; height:346px; width:810px;text-align:center; vertical-align:middle;background-color: rgba(0, 0, 0, 0.9);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F000000', EndColorStr='#7F000000');
}
.pics span p.text {color:#fff;padding:160px 0 0 0;filter: alpha(opacity=100); -khtml-opacity: 1.0; -moz-opacity: 1.0; opacity: 1.0;}
</style>
<script type="text/javascript" charset="utf-8">
$(function(){
$.ajax({
type: "GET",
url: "xml/images.xml",
dataType: "xml",
success: function(xml) {
$(xml).find("image").each(function(n) //finds each image in the xml
{
var path = $(this).attr("path");//path to the image from the xml
var picURL = $(this).attr("picURL");//picture link url
var picDesc = $(this).attr("picDesc");//pic description
//this appends the images to the slide show from the xml
$("#slideshow").append('<a id="'+n+'" href="' + picURL + '"><span class="desc"><p class="text">'+picDesc+'</p></span><img src="' + path + '"/></a>');
//this is the hover function to show the text
$('a:has(span)').hover(function(){if(this.id == '0'){$('span',this).stop().fadeIn();};$('span', this).fadeIn();},function(){$('span', this).stop(true, false).fadeOut();});
});
$('#slideshow').cycle({fx: 'fade'});
}
});
});
</script>
</head>
<body>
<div id="slideshow" class="pics"></div>
</body>
</html>
And here is the XML to go along with it.
<imageList timer="4" fadeTime="1.2" newWindow="false" loaderColor="0x333333" loaderAlpha="0" loaderPosition="bottom" allowLinks="true" randomLoad="false">
<image path="images/slide01.jpg" picURL="" picDesc=""/>
<image path="images/slide02.jpg" picURL="/gallery/glamour_neons" picDesc="G L A M O U R"/>
<image path="images/slide03.jpg" picURL="/gallery/time_manny" picDesc="T I M E M A G A Z I N E "/>
</imageList>
So you can see i use jquery cycle for ease of use with images and it makes it easy to change if the clients requests but because of that i have a settimeout to wait for everything to be pushed to the page then start the cycle plugin. A better way to do this would be awesome . also what i seem to need help with is this isnt functioning 100% perfect. I cant quite seem to get the code any cleaner. Any help on clean and perfectly executing code would be amazing.