PDA

View Full Version : Ultimate Fade-in slideshow (v2.1) external txt for images



jakewade
01-04-2010, 06:56 PM
Hi. I'm very new to java coding, but luckily stumbeld across these amazing tutorials. I found the ultimate fade-in slideshow, which works brilliantly and have managed to slightly tweak it.
I want to use another .txt file to list the images though. I've only really seen XML files used by actionscript, so firstly would these work, or is it another type of .txt file. And how could they be nestled - have a <slideshow> element and then <image 1....> within?

Lastly, how would this actually be coded? I've looked on the forums but this isn't answered for the new v2.1.

Thanks, Jake.

Nile
01-04-2010, 07:10 PM
I wouldn't know how to do it any other way then use PHP - does your host support PHP? (Of course, it could be done with AJAX, but I'm not that good with ajax).

jakewade
01-04-2010, 07:30 PM
Hi.
I don't think i have php, but I'm going to re-register my URL with another supplier soon-ish so might as well get one (my dad annoyingly set mine up off his account and so im limited at the moment).

Very very plainly speaking php will do the same thing as using an xml is flash, yes? so i'd have a txt document with my images nestled within containers, and the script within html would access this...?

and so then how would that change the code - just another line that switches the script to source from another location?

Thanks.

Nile
01-04-2010, 07:39 PM
I don't understand what your asking - but flash cannot edit javascript (to my knowledge).

jakewade
01-04-2010, 08:05 PM
Hi.

Sorry for being confusing. Basically I understand how to link XML to flash files - its a nice clean and simple way to keep coding down and easily edit the images/whatever.

I want a similar thing within this tutorial, to use in the javascript slideshow. From your last comment I was just double checking that PHP essentially does the same thing - links a simple txt file to the javascript to avoide massive codes for many images.

Then, how would changing the tutorial affect the code. Would it just be in the html, to link to this file (via php)?

Thanks. Sorry for any confusion!! jake

Nile
01-04-2010, 08:11 PM
Ahh! I see, you want this script in flash. Perfectly clear now! Here's something almost exactly like the Javascript slideshow, except in flash, and it uses XML: http://www.flashnifties.com/xml_slideshow.php

jscheuer1
01-05-2010, 06:12 AM
Here's a demo:

images.txt
_______________


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


<!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.

jakewade
01-05-2010, 09:11 PM
Thanks, that's excellent code.

I haven't had a chance to look into it properly (not that I know what I'm doing) but a quick test shows that's exactly what I wanted!

I'll try and update if I get a chance to test this live, across various browsers. Previewing in firefox (v3.5.6) and IE (v8) seem fine though.

Thanks again. jake