Printable View
1) Script Title: VFS script
2) Script URL (on DD):
http://www.dynamicdrive.com/
http://home.comcast.net/~jscheuer1/s.../vac_plain.htm
3) Describe problem:
Sometimes the slideshows don't start automatically, and don't start when you click on "run" !
Help John :)
I forgot to give a link to the website where the problem occurs !
http://www.cecilecailliere.com/travel-pictures.htm
it happens with Firefox and IE :o
I don't think this is the problem, but on line 108 your markup is wrong:
It should be:Code:<img src="galerie_travel_usa.jpg" name="usa" width="180" height="121" border="0" margin-right:80px"></a></p>
Code:<img src="galerie_travel_usa.jpg" name="usa" width="180" height="121" border="0" style="margin-right:80px"></a></p>
Thank you Nile, even if this not the reason of the problem I have modified the line :)
Is it a problem coming from the script itself or from my code :confused:
First of all, please restore the credit notice to the pages' source code.
I think it's the script. Use the uncompressed version (right click and 'save as'):
http://home.comcast.net/~jscheuer1/s...ewfadeslide.js
That at least fixes the bit about the run button not working as expected. I cannot be sure about the other problem because that only occurs sometimes. But I refreshed it a lot and couldn't get it to do that when using the uncompressed version.
One credit was missing, sorry for that :o
I have modified all the pages with the new js file, that includes the parameters and comments.
I suppose the script will become "official" next time.
The problem of slideshows not starting sometimes occurs still after the modifications (I have cleared the IE cache). If you navigate from one galery to another, it will happen after several times. If you refresh the page, the slideshow starts with the fading effekt.
Thanks for the help :)
In fact, the slideshows seem to start everytime, only the fading effekt is sometimes not working !
I see you've edited the viewfadeslide.js script. You should not, those are default values. Your on page config will override them where different. That's the only material difference I see between my working version and your occasionally not working one.
Download the viewfadeslide.js script again, this time use it as is.
On a side note, this causes a script error and should be removed:
But it really isn't hurting anything as far as the current issue goes. Looks bad in some browsers though, and could cause problems down the line with other stuff.Code:<script type="text/javascript">
gradualFader.init() //activate gradual fader
</script>
However, the start of the show is still odd if the images aren't already cached. It works and all, but the first image passes too quickly. There is an entirely different approach to this we could try if you are interested. Since you are already using jQuery for the menu, the Ultimate Fade 2.1 script could be used (with some tweaking) to do this and would result in signifcant code savings, as well as perhaps better performance.
Yes I had edited the viewfadeslide.js file with my parameters and wanted initialy to remove these parameters from my pages... and forgot it !
So I understand it is better to let the viewfadeslide.js file unchanged and let the personal modifications in the pages.
I let only one difference, line 44 to avoid that other navslidetittles than 'run' appear sometimes on the pages. But maybe it's not the best way !?
I have removed the gradualfader script (copy/paste from another website needing it).
Concerning the automatic start of the show, it's true that the first image appears too quickly with galleries having to many images. I had the idea to add a script that preloads all the images before the slideshow starts, but gived up (obliged to put the different names of all the photos on each page...).
I have removed the automatic start, but in fact I woul prefer to have it working without problem. I understand there is a possibility with another script ?
And another problem : I let only the 'run' button, but it works as 'next', maybe I have mixed something :confused:
I appreciate your help :)
I have navigated again through the different galleries and the fading effekt is sometimes missing. After a page refresh it works normally.
Hope it helps to solve the issue.
You seem to always want to do something. My local demo has the viewfadeslaide.js file exactly as is, and the settings that you had on the page exactly as they were. All worked fine, except for that loading business. To fix that, all you might have to do would be to preload the first two or three images. The run button works fine here.
Anyways though, this script is getting to be a bit outdated. I had hoped to rewrite it at some point, but I see my interest in that has faded. There are other ways to get these effects. But it might be a little tricky to setup. When I have some time I may mock up my idea. Anyway though, what I'm thinking is that with minor modification Ultimate Fade 2.1 can handle the slide show portion of this and be made to respond to thumbnails. I've written that much already. What would be a nice touch would be to have the HTML code for thumbnails be generated automatically. That way you would only have to enter the images once, in the slide show's configuration. Or have the array for the slideshow be generated by the markup of the thumbnails. I'm thinking that since the filenames are the same (thumbs and larger versions), only the folders are different, it might save some typing.
Hi John,
I have put the viewfadeslaide.js file unchanged (except line 44 as mentionned to have only the Run button). I have still the same problem with IE8 or Firefox even if it works fine in most of the cases.
I will try to make the same based on Ultimate Fade 2.1 and Image Thumbnail Viewer II.
To simplify the generation of the files on this website, I have put the same name for all the pics of a html file (only the index is changing). And then I change the name in a few click with Dreamweaver.
In any case thanks for the help ;-)
It worked here with NO change to the main script and with this as the on page config:
No extra buttons showed up. I'm working on my own jQuery plugin though that will greatly simplify all this. Stay tuned if you're interested. It's shaping up really well.Code:<script type="text/javascript">
viewfadeslide.config = {enableCaption : {vac: true},
captionTop : false,
makeTitle : true,
hideImgMouseOut : false,
disableOnmouseover : true,
populateWithFirst : true,
enableCount : true,
enableTransition : true,
writeNumberButtons : false,
writeControlButtons : false,
useButtons : false,
enableSlideShow : true,
startSlideShow : true,
swapControlVals : false,
slideHoverBehavior : 'none',
slideTriggerBehavior : 'stop'};
</script>
Withe the viewfadeslaide.js file inchanged and these parameters, I see the extra buttons in the same cases where a sllideshow does not start !
Could I have a problem on my computer :confused:
Yes I am interested in your own plugin, I will follow that :)
That's odd, it worked here:
http://home.comcast.net/~jscheuer1/side/vfs_2.htm
Anyways though, as I hinted, I'm not real thrilled with that script. For a number of reasons I'm coming to believe that it's not worth further development, though if we could get it to do what you want it to, I'm not opposed to trying that.
Here's the current jQuery plugin:
http://home.comcast.net/~jscheuer1/side/vfs/test_7.htm
It needs a bit of streamlining, perhaps a few more optional features, testing in Safari and Chrome, but as I say is shaping up very nicely.
One page with the new script :
http://www.cecilecailliere.com/landscapes/nature_2.htm
Works fine on local.
Online I have a status bar :confused: ; when it is solved I will modify the other galleries and check if it works everytime when surfing in the different galleries, and probably put the main script in an extra file :)
I've updated the script:
http://home.comcast.net/~jscheuer1/side/vfs/test_8.htm
But it would have the same problem. You should get rid of:
because you have nothing that uses that, when it gets to the random function, it throws an error trying to sort a null object. I may add a fix (test to avoid the error) for that, or rely upon documentation to warn against it.Code:$('.show').slideShow({showback: 'showback', random: true});
There could also be other problems.
And, from what you've been saying, you might want to change:
to:Code:$('.vacation_2 img').slideShow({rotaterate: 2000, faderate: 1500, nopause: true, stopped: true, controls: '.show2controls'});
With the updated version of the script, use:Code:$('.vacation_2 img').slideShow({rotaterate: 2000, faderate: 1500, controls: '.show2controls'});
Code:$('.vacation_2').slideShow({rotaterate: 2000, faderate: 1500, controls: '.show2controls'});
I have updated the script and put the code modification and IE shows the message "out of memory at line : 25" :confused:
On local it works fine, and the slideshows starts automatically, which was not the case before :)
Change this (from your live page's source code):
to:Code:<script type="text/javascript" src="../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.Code:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
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:
Save it as jsjqslideshow.js and replace it and its opening and closing script tags with: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);
This part (which is the configuration/activation):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>
For what you are doing, should probably be: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>
And if you are using the same configuration on all pages, can also be made external.Code:<script type="text/javascript">
jQuery(function($){
$('.vacation_2').slideShow({rotaterate: 2000, faderate: 1500, controls: '.show2controls'});
});
</script>
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 :)
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
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:Quote:
Originally Posted by lio
to:Code:.vacation_2 {
margin: 0 auto;
background-color: black;
overflow: auto;
float: left;
width: 520px;
height: 540px;
}
Or, better yet, by inserting this in your configuration/activation code:Code:.vacation_2 {
margin: 0 auto;
background-color: black;
overflow: hidden;
float: left;
width: 520px;
height: 540px;
}
Doing it that way will remove the scrollbar from the very beginning, but only for javascript enabled users.Code:document.write('<style type="text/css">.vacation_2 {overflow: hidden;}<\/style>');
jQuery(function($){
$('.vacation_2').slideShow({rotaterate: 2000, faderate: 1500, controls: '.show2controls'});
});
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.Quote:
Originally Posted by lio
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):
if you prefer, and simply place your description division wherever you like: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'
});
});
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 !!
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
That page is using the random option:Quote:
Originally Posted by lio
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.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|( )/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>
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:
- 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)
- 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:
wherever you want it, and style it however you want it.HTML Code:<div class="mydesc"></div>
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.
Two new questions ;)
- How can you choose to have or not the pause when you put the mouse on the slideshow area ?
- When the slideshow is running, another nice possibility could be to have a gradual fader effect on the thumbs, with fade into view on the displayed image or when you put the mouse on it.
It's only an idea, what do you think about it ?
All the best :cool:
The latest stable version is now:
http://home.comcast.net/~jscheuer1/s...lideshow_2b.js
Demos:
http://home.comcast.net/~jscheuer1/s...jsjq_plain.htm
http://home.comcast.net/~jscheuer1/side/vfs/jsjq_2.htm
http://home.comcast.net/~jscheuer1/side/vfs/jsjq_3.htm
http://home.comcast.net/~jscheuer1/side/vfs/jsjq_4.htm
http://home.comcast.net/~jscheuer1/side/vfs/jsjq_5.htm
To get it to not pause, use:
nopause: true
example:
As for fancy effects for the thumbnails, that's up to you. Because they are simply ordinary HTML, these may be accomplished in any fashion that you choose. The one caveat being that if you use random (depending upon how the effects are assigned to the thumbnails), you may need to use the oninit or onrandinit property of the slide show to set them up.Code:$('.myshow').slideShow({nopause: true});
Here's a demo of using jQuery and a bit of css to add a fade effect to the thumbs:
http://home.comcast.net/~jscheuer1/side/vfs/jsjq_6.htm