Here's a demo:
images.txt
_______________
Code:
<img src="http://i26.tinypic.com/11l7ls0.jpg" title="Nothing beats relaxing next to the pool when the weather is hot.">
<a href="http://en.wikipedia.org/wiki/Cave" target="_new" title="Some day I'd like to explore these caves!"><img src="http://i29.tinypic.com/xp3hns.jpg"></a>
<img src="http://i30.tinypic.com/531q3n.jpg">
<img src="http://i31.tinypic.com/119w28m.jpg">
Then a file that uses it, mine's called:
load_from_txt.htm
_________________
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#fadeshow2toggler {
width: 250px;
text-align: center;
margin-top: 10px;
}
#fadeshow2toggler a {
text-decoration: none;
}
#fadeshow2toggler img {
border: none;
margin-top: -2px;
}
.status {
margin: 0 50px;
font-weight: bold;
vertical-align: top;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
jQuery.get('images.txt', function(data){
var images = [], im;
data = jQuery('<div>' + data + '<\/div>').children('a, img');
data.each(function(){
images.push((im = this.getElementsByTagName('img')[0])?
[im.src, this.href, this.target || '', this.title || im.title || '']:
[this.src, '', '', this.title || '']);
});
new fadeSlideShow({
wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: images,
displaymode: {type:'auto', pause:2500, cycles:5, wraparound:true},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "fadeshow2toggler"
});
});
</script>
</head>
<body>
<div id="fadeshow2"></div>
<div id="fadeshow2toggler" style="width:250px; margin-top:10px">
<a href="#" class="prev">
<img src="http://i31.tinypic.com/302rn5v.png" alt="Previous" title="Previous">
</a>
<span class="status"></span>
<a href="#" class="next">
<img src="http://i30.tinypic.com/lzkux.png" alt="Next" title="Next">
</a>
</div>
</body>
</html>
Note: Not extensively tested, may have problems with large images in some browsers. Not tested live, but the images are remote, so it should work live.
Also, one could simply make up the array of images as an external javascript and/or PHP (or other server side language) file.
Ultimate Fade-in slideshow (v2.1) external txt for images
Reply With Quote
Bookmarks