PDA

View Full Version : How do I stop Ultim Fade-in S Show ver 1.5 on last image?



peebs24
12-17-2009, 03:46 PM
1) Script Title: Ultimate fade in slide show

2) Script URL (on DD):URL: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I am using ver 1.5 of the Ultimate fade-in slideshow. Can anyone please tell me how I can make it stop on the last slide of the show?
many thanks,

jscheuer1
12-17-2009, 04:50 PM
Update to the current version. You linked to it in your post.

peebs24
12-17-2009, 05:03 PM
Thanks John. I was hoping to find a solution to the version that I already have as I have used it in a number of apps.
I used the ver 2 URL because I couldn't find the URL for the earlier version.
Best regards,

jscheuer1
12-17-2009, 05:08 PM
Well, as far as I know, we are no longer fully supporting that code. But you might want to look here:

http://www.dynamicdrive.com/forums/showthread.php?t=40915

peebs24
12-17-2009, 06:51 PM
Hi John,
I upgrades to the latest version and that is better BUT, it starts OK on page load - GREAT
It runs one cycle BUT it stops on the first page NOT the last page!! NOT GREAT!!
I have a number of photos which I want to run stopping on the last slide which is a message slide. Any ideas?
Regards,

jscheuer1
12-17-2009, 08:40 PM
Set the cycles to 1 and add this onslide to your declaration, example:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [468, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://stickmanlabs.com/images/kevin_vegas.jpg"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
onslide: function(){
if(this.setting.currentstep === this.setting.totalsteps - 1){
this.navigate(this.setting.imagearray.length - 1);
}
}
})

Don't miss the added comma (red) after the togglerid.

peebs24
12-17-2009, 08:53 PM
Hi John,
That is a GREAT fix - works like a charm!! Many thanks.
I notice in the new version that there doesn't seem to be a way to turn the 'pause on mouseover' off ........... or is there???
Best regards,

jscheuer1
12-18-2009, 03:42 AM
Two choices, the first is cleaner but also disables the descriptions (if any) for that show's instance:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [468, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://stickmanlabs.com/images/kevin_vegas.jpg"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
onslide: function(){
if(this.setting.currentstep === this.setting.totalsteps - 1){
this.navigate(this.setting.imagearray.length - 1);
}
},
oninit: function(){
this.setting.$wrapperdiv.unbind('mouseenter');
}
})

Here, only the pause for that show is disabled:


var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [468, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://stickmanlabs.com/images/kevin_vegas.jpg"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: "",
onslide: function(){
if(this.setting.currentstep === this.setting.totalsteps - 1){
this.navigate(this.setting.imagearray.length - 1);
}
},
oninit: function(){
var sObj = this;
this.setting.$wrapperdiv.bind('mouseenter', function(){sObj.setting.ismouseover=false});
}
})

peebs24
12-18-2009, 10:01 AM
Hi John,
many thanks for the response re clearing mouseover.
I tried the first fix but it stopped the slide show completely - no images at all!
I poked around in the .js file and:-

setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=false}) //pause slideshow mouseover
setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
$loadingimg.hide()
etc
Changing the true to false seemed to make it work. I think that your second solution does the same thing but outside of the .js file???
Can the background of the slideshow div be set to transparent? It seems to accept the base colours but not transparent. Is this a JS restriction?
Forgive all the questions - I am just learning JS - slowly!!
Regards,

jscheuer1
12-18-2009, 11:35 AM
I tested both solutions, and both worked here. Perhaps it's a browser specific thing, but I doubt it. More likely a syntax error copying over the code. Like perhaps forgetting to use the added comma.

Anyways, you are right about where in the script this happens and what to change to make all slide shows not pause. However, it is generally best not to 'hack' the script. Then it won't work as intended for other slide shows. You will need two copies of the script. One for pausing shows, one for non-pausing shows.

The onslide and oninit properties of a slide show affect only that one (instance of a) show.

You can have a transparent background by setting it in your style section on the page:


<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
background-color: transparent!important;
}
</style>

Where fadeshow1 is the wrapperid for the show. But this will give rise to odd things sometimes. If the images are of varying sizes, or have transparent or semi-transparent areas, there will be bleed through. That can be dealt with a few ways if needed and actually does require modification to the script, but not in such a way that would prevent it from working with other shows.

peebs24
12-18-2009, 12:50 PM
Thanks John,
I think that I am learning JS faster here than in all the books that I have on it!!
It might have been a syntax problem but I copied and pasted so it should have been OK. I did note the extra comma. I tried it in all 5 browsers with the same result. I will play around with it later tonight and let you know.
I put the .js script back as found and did your second fix - worked a treat!!
Re transparancy:- I will give that a try tonight. Would it be better to put it in the .css file where I am already fdefining the container for the slideshow?
Best regards,

jscheuer1
12-18-2009, 01:05 PM
It can go in any stylesheet you have for the page. Logically, from the point of view of organization, it should probably go with other styles for the show.

peebs24
12-23-2009, 04:54 AM
Hi John,
many thanks for the transparency fix - works just fine.
I tried your first mouseover pause fix again and it works OK as does the second fix. I think that the problem was the loose nut behind the keyboard!!
I tried loading a .gif and .png picture in with the .jpg pictures but the .gif and the .png picts didn't display. Is there something that restricts this script just to .jpg?
Many thanks for all your help John. Have a great Christmas and a happy & Prosperous New Year.
Best regards,
Peter

jscheuer1
12-23-2009, 09:33 AM
Using .gif and .png is fine. There must be some other reason that they didn't show up. However, as stated (because both of these formats can have transparency of one sort or another):


You can have a transparent background by . . .

. . . But this will give rise to odd things sometimes. If the images are of varying sizes, or have transparent or semi-transparent areas, there will be bleed through.

peebs24
12-23-2009, 10:47 AM
I will take another look at it. The .gif and the .png were smaller than the div or the .jpg picts.
John, do you happen to know of a decent book from which to learn the basics of Javascript? I have 'Java Script - the complete reference' and the 'JavaScript Bible' but they both tend to be reference type books. I am looking for something that covers the basic concepts.
Regards,
P
PS. This question might be off thread - my apologies.

jscheuer1
12-23-2009, 11:28 AM
This book:

Object-Oriented JavaScript
by: Stoyan Stefanov
publisher: PACKT

is pretty good, though not perfect. It's biggest problem is that it doesn't always (though it usually does) identify when something doesn't work in some browsers. It does however do a good job on tying things together and on many of the important fine points. It is complete with examples and exercises you can try out. Some of it (mostly for simple concepts) employs the Firefox Firebug extension, but you don't need that. I have Firebug but don't use it or know it very well. You just have to understand that when the author is using it to explain things, which he does a lot with real simple ideas, that typing it into the Firebug console is just a little different than coding it right to the page would be.

If the book is a bit pricey for you (I got a review copy), you can go to the publisher's page and get the .PDF version for considerably less. For trying out the code, PDF is actually better because you can cut and paste from it. Also, it (the actual book) may be available at a reduced price from some vendors.