jQuery parsing XML to make slideshow
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 开发者_如何学Pythonthis 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.
Don't use setTimeout, the arbitrary 500 milliseconds are, well, arbitrary, so the cycle plugin is not guaranteed to work.
Why don't you instantiate the plugin at the end of the Ajax success handler?
加载中,请稍侯......
精彩评论