Slideshow not always starting

Change this (from your live page's source code):

Code:

---

<script type="text/javascript" src="../jquery.min.js">
</script>

---

to:

Code:

---

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

---

Alternatively, you may download the latest version from the URL in the src attribute and host it yourself if you like.

Also, I've updated the update:

http://home.comcast.net/~jscheuer1/side/vfs/test_8.htm

to prevent undesirable results when the 'go' and other navigation classes are clicked repeatedly.

This is an important change.

Yes it works fine now ! :)
I will change the other pages.
Soon an official script I suppose.

Many thanks ;)

A couple of things. This part may be made external:

Code:

---

/* jQuery Slide Show Plugin ©2010 John Davenport Scheuer
  as first seen in http://www.dynamicdrive.com/forums/
  username: jscheuer1 - This Notice Must Remain for Legal Use
  */
(function($){
        var cre = /\bslide_(\d+)\b/, //regex for individual buttons
        sre = / img$/; //regex for selector
        $.fn.slideShow = function(cObj){
                cObj = cObj || {};
                if(!sre.test(this.selector)){
                        cObj.parent = this.css({position: 'relative', overflow: 'hidden'});
                        this.data('slideShow', cObj);
                        $(this.selector + ' img').slideShow(cObj);
                        return;
                }
                if(cObj.random){
                        this.sort(function() {return 0.5 - Math.random();});
                }
                cObj.count = cObj.count || 0; cObj.rotaterate = cObj.rotaterate || 2500; cObj.ims = [];
                cObj.faderate = cObj.faderate || 1500; cObj.counter = cObj.counter || ['', '/'];
                var p = [cObj.parent.innerHeight(), cObj.parent.innerWidth()], timer = 0;
                cObj.ln = this.hide().css({position: 'absolute', top: 0, left: 0}).hover(function(){cObj.pause = !cObj.nopause;}, function(){cObj.pause = false;}).each(function(i){
                        cObj.ims[i] = $(this);
                        var im = $(new Image());
                        im.bind('load', function(){
                                cObj.ims[i].data('loaded', true)
                                .css({marginTop: (p[0] - cObj.ims[i].outerHeight()) / 2, marginLeft: (p[1] - cObj.ims[i].outerWidth()) / 2});
                        });
                        if(!i){
                                im.bind('load', function(){
                                        cObj.ims[0].fadeIn('normal', function(){
                                                if(cObj.showback){
                                                        $('#' + cObj.showback).css('backgroundColor', cObj.background || 'black');
                                                }
                                                if(cObj.controls && cObj.active.length){
                                                        $(cObj.controls + ' .slide_1').addClass('active');
                                                }
                                                if(cObj.controls){
                                                        $(cObj.controls + ' .cObj.count').html(cObj.counter[0] + 1 + cObj.counter[1] + cObj.ln);
                                                }
                                                if(cObj.onslide){
                                                        cObj.onslide.call(cObj);
                                                }
                                                timer = setTimeout(cObj.slide, cObj.rotaterate);
                                        });
                                });
                        }
                        im.attr('src', cObj.ims[i].attr('src'));
                }).length;
                if(cObj.controls){
                        $(cObj.controls + ' .stop').bind('click', function(e){clearTimeout(timer); cObj.stopped = true; e.preventDefault();});
                                $(cObj.controls + ' .go').bind('click', function(e){
                                if(cObj.stopped){
                                        clearTimeout(timer);
                                        cObj.stopped = false;
                                        cObj.slide();
                                }
                                e.preventDefault();
                        });
                        $(cObj.controls + ' .next').bind('click', function(e){ //next button
                                clearTimeout(timer);
                                cObj.stopped = false;
                                cObj.slide();
                                cObj.stopped = true;
                                e.preventDefault();});
                        $(cObj.controls + ' .prev').bind('click', function(e){ //previous button
                                clearTimeout(timer);
                                cObj.ims[cObj.count % cObj.ln].fadeOut(cObj.faderate);
                                cObj.count = cObj.count - 2 + cObj.ln;
                                cObj.stopped = false;
                                cObj.slide();
                                cObj.stopped = true;
                                e.preventDefault();
                        });
                        $(cObj.controls + ' .first').bind('click', function(e){ //first button
                                cObj.stopped = true;
                                clearTimeout(timer);
                                if(cObj.count % cObj.ln !== 0){
                                        cObj.ims[cObj.count % cObj.ln].fadeOut(cObj.faderate);
                                        cObj.count = cObj.ln - 1;
                                        cObj.stopped = false;
                                        cObj.slide();
                                        cObj.stopped = true;
                                }
                                e.preventDefault();
                        });
                        $(cObj.controls + ' .last').bind('click', function(e){ //last button
                                cObj.stopped = true;
                                clearTimeout(timer);
                                if(cObj.count % cObj.ln !== cObj.ln - 1){
                                        cObj.ims[cObj.count % cObj.ln].fadeOut(cObj.faderate);
                                        cObj.count = cObj.ln - 2;
                                        cObj.stopped = false;
                                        cObj.slide();
                                        cObj.stopped = true;
                                }
                                e.preventDefault();
                        });
                        cObj.active = $(cObj.controls + ' [class*="slide_"]').bind('click', function(e){ //individual buttons
                                var num = this.className.match(cre);
                                if(num && num[1]){
                                        cObj.stopped = true;
                                        clearTimeout(timer);
                                        if(cObj.count % cObj.ln !== (num[1] - 1 + cObj.ln) % cObj.ln){
                                                cObj.ims[cObj.count % cObj.ln].fadeOut(cObj.faderate);
                                                cObj.count = num[1] - 2 + cObj.ln;
                                                cObj.stopped = false;
                                                cObj.slide();
                                                cObj.stopped = true;
                                        }
                                }
                                e.preventDefault();
                        });
                }
                cObj.slide = function(){
                        clearTimeout(timer);
                        if(cObj.stopped){
                                return;
                        }
                        if(cObj.pause || !cObj.ims[(cObj.count + 1) % cObj.ln].data('loaded')){
                                clearTimeout(timer);
                                timer = setTimeout(cObj.slide, 300);
                                return;
                        }
                        cObj.count = cObj.count % cObj.ln;
                        cObj.ims[cObj.count].fadeOut(cObj.faderate);
                        cObj.ims[(++cObj.count) % cObj.ln].fadeIn(cObj.faderate, function(){
                                if(cObj.onslide){
                                        cObj.onslide.call(cObj);
                                }
                                clearTimeout(timer);
                                timer = setTimeout(cObj.slide, cObj.rotaterate);
                        });
                        if(cObj.controls && cObj.active.length){
                                cObj.active.removeClass('active');
                                $(cObj.controls + ' .slide_' + (cObj.count % cObj.ln + 1)).addClass('active');
                        }
                        if(cObj.controls){
                                $(cObj.controls + ' .count').html(cObj.counter[0] + (cObj.count % cObj.ln + 1) + cObj.counter[1] + cObj.ln);
                        }
                };
        }
})(jQuery);

---

Save it as jsjqslideshow.js and replace it and its opening and closing script tags with:

HTML Code:

---

<script type="text/javascript" src="jsjqslideshow.js">
/* jQuery Slide Show Plugin ©2010 John Davenport Scheuer
  as first seen in http://www.dynamicdrive.com/forums/
  username: jscheuer1 - This Notice Must Remain for Legal Use
  */
</script>

---

This part (which is the configuration/activation):

Code:

---

<script type="text/javascript">
jQuery(function($){
        $('.vacation_2').slideShow({onslide: function(){if(this.count === this.ln)this.stopped = true;}, rotaterate: 2000, faderate: 1500, nopause: true, controls: '.show2controls', counter: ['Image ', ' of ']});
});
</script>

---

For what you are doing, should probably be:

Code:

---

<script type="text/javascript">
jQuery(function($){
        $('.vacation_2').slideShow({rotaterate: 2000, faderate: 1500, controls: '.show2controls'});
});
</script>

---

And if you are using the same configuration on all pages, can also be made external.

Done for this page, with 2 external js files :)
A good sample to adapt the other pages, thanks :cool:

I can confirm that the slideshows always start with the new script ;)

I have 3 "cosmetic" questions :
- the first image of a slideshow appears without fading effekt : is that linked to a the loading time when a gallery contents to many images ?
- during a short time appears a vertical scrollbar : is there a way to avoid that ? Eventually by customizing the scrollbar color ??
- In the vfs script it was possible to position the title of the images : is it possible without modification of the main script ?

Thanks :)

Quote:

---

Originally Posted by lio

- the first image of a slideshow appears without fading effekt : is that linked to a the loading time when a gallery contents to many images ?

---

That's actually a 'feature' and is intentional. And it does fade in, just faster than the rest. If the first slide were to fade in at the same rate as subsequent fade out/fade ins, there would be a brief period when there would be no picture at all. But I've made an update where that can be controlled by the configuration/activation.

Quote:

---

Originally Posted by lio

- during a short time appears a vertical scrollbar : is there a way to avoid that ? Eventually by customizing the scrollbar color ??

---

That's also intentional. If javascript is disabled, all of the larger images will still be visible via that scrollbar. However, you may disable that by changing:

Code:

---

.vacation_2 {
        margin: 0 auto;
        background-color: black;
        overflow: auto;
        float: left;
        width: 520px;
        height: 540px;
}

---

to:

Code:

---

.vacation_2 {
        margin: 0 auto;
        background-color: black;
        overflow: hidden;
        float: left;
        width: 520px;
        height: 540px;
}

---

Or, better yet, by inserting this in your configuration/activation code:

Code:

---

document.write('<style type="text/css">.vacation_2 {overflow: hidden;}<\/style>');

jQuery(function($){
        $('.vacation_2').slideShow({rotaterate: 2000, faderate: 1500, controls: '.show2controls'});
});

---

Doing it that way will remove the scrollbar from the very beginning, but only for javascript enabled users.

Quote:

---

Originally Posted by lio

- In the vfs script it was possible to position the title of the images : is it possible without modification of the main script ?

---

I don't believe that was exactly the case with vfs. I think you mean that the title of the thumbnail image could be used as a description, and that description could be positioned. That's one of the things I didn't like about vfs. It forced you to use the title attribute for a description, when perhaps you might want no title attribute, or one that was different from the description. I've made an update for that too for the new script. But instead of the thumbnail title, I use spans in the larger image area. That way rich HTML may be used in the descriptions if desired, and a separate title for the thumbnail, or no title for the thumbnail can be used. Also, for non-javascript enabled users, the descriptions may be made to appear in the scrollable section, with their larger images.

Here's an updated demo that includes the new features discussed, plus a randomizing feature. The descriptions show on hover of the larger images, but that's an advanced function of the oninit property in the configuration/activation. You may skip (omit) that (highlighted):

Code:

---

jQuery(function($){
        $('.vacation_2').slideShow({
                random: true,
                oninit: function(){
                        var cObj = this, d = $(this.descriptions).css({width: '100%'}).show(), dre = /\s|( )/g,
                        w = d.wrap(document.createElement('div')).parent()
                        .css({bottom: '-' + d.outerHeight() + 'px', width: this.parent.innerWidth(), position: 'absolute'})
                        .hover(function(){cObj.pause = !cObj.nopause;}, function(){cObj.pause = false;})
                        .prepend(document.createElement('div')).children('div').first()
                        .css({opacity: 0.7, height: '100%', width: '100%', backgroundColor: '#000', position: 'absolute'}).parent();
                        this.parent.hover(function(){
                                w.css('height', d.outerHeight());
                                if(d.html().replace(dre, '') === '') {return;}
                                w.animate({bottom: 0});
                                }, function(){w.animate({bottom: '-' + d.outerHeight() + 'px'})}
                        );
                },
                rotaterate: 2000,
                initrate: 2000,
                faderate: 1500,
                controls: '.show2controls',
                descriptions: '.show2descriptions'
        });
});

---

if you prefer, and simply place your description division wherever you like:

http://home.comcast.net/~jscheuer1/side/vfs/test_12.htm

Notes: Demo also use the random option. You may skip that as well if you prefer. The oninit function option above is buggy if used with the nopause option. But you aren't using that option. I will probably be integrating the oninit description option more fully into the main code and fixing that bug. For now don't use the above highlighted oninit function with the nopause option.

Thanks again John, very flexibel the last version !

For the first point, I would appreciate a loading gif for a short time before the 1st image appears with fading effekt.

I have detected an issue : when you refresh the page
http://home.comcast.net/~jscheuer1/side/vfs/test_12.htm
the thumbs order is changing !!

Quote:

---

Originally Posted by lio

For the first point, I would appreciate a loading gif for a short time before the 1st image appears with fading effekt.

---

Do you mean the loading image fades? I'm not clear exactly what you are proposing. In any case, be careful. A loading image should be a very small (byte size) image so it can load ahead of the actual images. Better perhaps to use the show as I originally intended, with a quick fade in of the first image. This assumes that your first image isn't too large byte wise. All images for the web should be optimized anyway, especially those for use in a slide show. I'm pretty sure I can work out the loading image thing though.

Quote:

---

Originally Posted by lio

I have detected an issue : when you refresh the page
http://home.comcast.net/~jscheuer1/side/vfs/test_12.htm
the thumbs order is changing !!

---

That page is using the random option:

Code:

---

<script type="text/javascript">
jQuery(function($){
        $('.vacation_2').slideShow({
                random: true,
                oninit: function(){
                        var cObj = this, d = $(this.descriptions).css({width: '100%'}).show(), dre = /\s|(&nbsp;)/g,
                        w = d.wrap(document.createElement('div')).parent()
                        .css({bottom: '-' + d.outerHeight() + 'px', width: this.parent.innerWidth(), position: 'absolute'})
                        .hover(function(){cObj.pause = !cObj.nopause;}, function(){cObj.pause = false;})
                        .prepend(document.createElement('div')).children('div').first()
                        .css({opacity: 0.7, height: '100%', width: '100%', backgroundColor: '#000', position: 'absolute'}).parent();
                        this.parent.hover(function(){
                                w.css('height', d.outerHeight());
                                if(d.html().replace(dre, '') === '') {return;}
                                w.animate({bottom: 0});
                                }, function(){w.animate({bottom: '-' + d.outerHeight() + 'px'})}
                        );
                },
                pausres: ['<img alt="" title="Go" src="play_button.gif" style="border: none;">', '<img alt="" title="Stop" src="pause_button.gif" style="border: none;">'],
                rotaterate: 2000,
                initrate: 2000,
                faderate: 1500,
                controls: '.show2controls',
                descriptions: '.show2descriptions'
        });
});
</script>

---

Each time the page loads, both the order of the images and the order of the thumbs will change. They will still sync up with each other though. If you don't want random, set it to false, or just remove it.



I've been working on internalizing the descriptions today. Note: These methods are not available yet. I think they're about ready. I just want to test them a bit more. The options will be:

1. Top or bottom slide in internal descriptions handled by the script with style hooks and options for tweaking their appearance. (This will perform the function of that great big oninit function in test_12 internally in the main script)
   
   
2. User specified description element. This will not animate, but may be placed wherever one desires on the page. One or more of several function hooks optional in the configuration may be used to animate it though, if desired.

If you choose the first approach, you will specify in the configuaration either:

descriptions: 'top',

or:

descriptions: 'bottom',

If top, the description's class name will be (for use in a stylesheet for tweaking appearance) "top_desc". If bottom, "bottom_desc". whichever these are will be a child of the main container of the show (.vacation_2) is what we've been using for that. So you may use then as child selectors or as primary selectors in the stylesheet. There are also "bottom_descbg" or "top_descbg" classes depending upon top or bottom descriptions. This is to set the background color for the top or bottom descriptions (whichever is used). A descopacity configuration property will be an option (defaults to 0.7 if not specified), for setting the opacity of the slide in description's background.

If you use the user specified method, you just specify a selector, like:

descriptions: '.mydesc',

Then put your element:

HTML Code:

---

<div class="mydesc"></div>

---

wherever you want it, and style it however you want it.

I meant a loading gif like used in the Image Thumbnail Viewer script. It's light enough or ?

For the image order changing... oups... I didn't see the random option :o
But I am very interested in this option for the entry page of websites with a simple slideshow.

And for the descriptions, thank youfor the explanations, I lthink you will cover all the wishes :)

(I had activate the "Instant email notification", but no email received after your 2 last posts)

The random option had problems in IE (all versions), but has been fixed in the current stable version:

http://home.comcast.net/~jscheuer1/s...s/test_14b.htm

which also includes the loading image. This feature was already available, I was just too busy with the descriptions to focus on it. You just set the loading image as the background-image for the main container, then remove it oninit as shown in the above demo.

Now, there are several features of the above demo you may not want/need. I've tried to make the options that invoke them self explanatory in that the names of the options indicate what they do. If there is any option you don't want, just remove it. If there is any option you have questions about, feel free to ask. There are also many options not used, so if there is something you want that you don't see, ask about that too.

My next steps will be to provide a persistence option so the show can resume where it left off when navigating to it after having left the page. Also, I now need to make the script external and test it against a variety of configurations to make sure everything still works as intended in the various configurations. I cannot test all configurations though, and some options being used together probably just make no sense, so if you see something that seems wrong let me know.