PDA

View Full Version : Code for scalable images in fadeSlideShow



More2Do
07-28-2013, 11:32 PM
1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem: Is there a way to modify the existing code that would allow images in a Fade Slideshow to scale in a responsive website?

Thanks!

jscheuer1
07-29-2013, 01:11 AM
responsive website

is a vague term. Generally it means you get different dimensions and/or layout for different resolutions, but exactly how that plays out depends upon the template/scheme you're using to achieve that. You can set in css (all display images in a slideshow are in two script created div elements with a class of 'gallerylayer'):


.gallerylayer img {
max-width: 300px;
max-height: 200px;
}

And I suppose you could use media queries/qualifiers and/or javascript to test for the res and have different ones for different resolutions.

I'm not sure if the slideshow would be responsive to that or not (the best chance would of course be if these styles are set before the page is parsed), but if not, it could be made to be easily enough. You would presumably also want to set the width and height for the slideshow accordingly (the dimensions property in the new fadeSlideShow call on the page):


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //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: [
["http://i26.tinypic.com/11l . . .

That would probably have to be done via javascript.

If you more or less know what you're doing, that should be enough (assuming, like I say, that the slideshow is responsive to the max-width/height style declarations). In any case, if you get it setup and it's still not working, let me have a look at it (post a link to a live demo). In the meantime, I will do a quick check to see if the script is responsive to max-width/height, I seem to recall that it is, not 100% sure though.

OK, I just tested that, and that much (being responsive to max-width/height) works.

More2Do
07-29-2013, 01:41 AM
Hi John,

Thanks for your reply. Code-wise, I think I'm a bit over my head on this one. I'm building a "responsive" website, which allows the webpage to be resized for different viewports (i.e., ipads, mobile phones, desktop models). I'm able to use a css script (img class="scalable") for all of the static images in the site, but not sure how to make it work for the slideshow. The site can be found at: http://www.ianzitidesign.com/test/index-fluid.html

Any help greatly appreciated!

jscheuer1
07-29-2013, 06:26 AM
OK, well let's see .scalable is:


/*Utility Rules for images. Scalable class makes images scale with window size.*/
img.scalable {
height: auto !important;
width: auto !important;
max-width: 100%;
vertical-align: bottom;
}

That means that the images will never be any wider than they actually are, but that if where they are is narrower than they are, they will scale down to fit the width. And playing with the demo page you linked to, it appears that width is the primary concern.

First backup what you have, just in case. Then where you have (which only does the gallerylayer divs, there is no id="fadeSlideShow" element):


<!--This code changes the background color from black to white-->
<style type="text/css">
#fadeSlideShow, #fadeSlideShow, .gallerylayer {
background-color: white !important;
}
</style>
<!--End background color code change-->


Make that (the margin-left for the .descpanelfg selector eliminates the need for all those &nbsp; characters in the imagearray, and will allow for proper formatting of multi-line descriptions):


<!-- This code changes the background color to white, makes the slide images scalable and moves descriptions to the left -->
<style type="text/css">
#banner, .gallerylayer {
background-color: white !important;
}
.gallerylayer img {
height: auto !important;
width: auto !important;
max-width: 100%;
vertical-align: bottom;
}
.descpanelfg {
margin-left: 28px;
}
</style>
<!-- End image scalability, background color change, format descriptions code -->



And for what follows, update jQuery. Change:


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

to:


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

Now what about the slideshow itself? It has:


var mygallery=new fadeSlideShow({
wrapperid: "banner", //ID of blank DIV on page to house Slideshow
dimensions: [960, 350], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["image . . .

Here's a rewrite of the script, where you can specify the dimensions as percents or any other valid css dimensional value (right click and 'Save As'):

5159

Oh, and you need the loading image, put it in the same folder as your page (also right click and save as):

5160

And replace the whole var mygallery=new fadeSlideShow({ section with (Notice that since the percent is not a raw number it has to be quoted):


var mygallery=new fadeSlideShow({
wrapperid: "banner", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 350], //width/height of gallery in css dimensional values.
imagearray: [
["images/banner_A.jpg", "", "", "Information about banner image A goes here"],
["images/banner_B.jpg", "", "", "Information about banner image B goes here"],
["images/banner_C.jpg", "", "", "Information about banner image C goes here"],
["images/banner_D.jpg", "", "", "Information about banner image D goes here"]//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
//this code targets a hotspot on mouseover for pop-up descriptions and resizes the show based upon width of the parent div
oninit: function(){
var descvis, g = this, s = g.setting, $wrap = s.$wrapperdiv, $desc = s.$descpanel, h, mm;
$wrap.css({height: (h = $wrap.width() * 350 / 960)});
if((mm = $wrap.data('mm'))){$wrap.unbind('mousemove', mm).unbind('mouseleave', $wrap.data('ml'));}
else{jQuery(window).resize(function(){s.oninit.apply(g);});}
$wrap.data({mm: function(e){
var o = $wrap.offset(), x = e.pageX, y = e.pageY, top = o.top + h - 25, left = o.left + 25,
evt = x < left && y > top? 'mouseenter' : y <= top && descvis || !descvis? 'mouseleave' : null;
evt && $wrap.trigger(evt);
descvis = evt !== 'mouseleave';
s.ismouseover = true;
}, ml: function(){descvis = false;}});
$wrap.trigger('mouseleave').mousemove($wrap.data('mm')).mouseleave($wrap.data('ml'));
this.showhidedescpanel('hide', 0);
$desc.find('div').css({width: $desc.width() - 8});
},
togglerid: ""
})



Notice also the highlighted line with the red 350 / 960, that's the ratio we want to maintain. It's the actual height over the actual width. If those change then they need to be updated there as well. And see that the &nbsp; characters are no longer needed in the imagearray

The browser cache may need to be cleared and/or the page refreshed to see changes.

More2Do
07-29-2013, 02:02 PM
Thanks, John...this is way more complicated than I thought. The slideshow now scales, however, the proportions seem to change in the narrower viewports (iPad, or making the desktop browser window narrower). As a result, the slideshow move down, away from the navigation bar and the bottom of the images are cutting off. Any suggestions?

http://www.ianzitidesign.com/test/index-fluid.html

Jon

jscheuer1
07-29-2013, 02:32 PM
You have the updated script, but you're not using it. Change:


<script type="text/javascript" src="Scripts/fadeslideshow.js">
</script>

to:


<script type="text/javascript" src="Scripts/fadeslideshowresp.js">
</script>

I should have mentioned that before, but I thought it was obvious, sorry.

Just a little while ago I edited things in my previous post. The code and styles are a little better, more efficient. But what you currently have works in a local mock up of the page, provided it uses the updated script. And provided you didn't miss anything else that I'm not seeing. I think you got everything else though.

Oh, and you still don't have the loading.gif image. Grab it from my previous post and put it in the same folder as the page. Not having it will not prevent the script from working, but it will make things look odd on load for first time visitors and anyone whose cache no longer contains the slide images.

After taking care of the script src attribute and uploading the loading.gif image, the browser cache may need to be cleared and/or the page refreshed to see changes.

Any further questions or problems, just let me know.

More2Do
07-29-2013, 10:20 PM
Hi John,

Sorry, one thing I missed. When I click on the LegacyPTLA logo (home button), the first image in the slideshow has the previous issue (not sized correctly and moved down, away from the navigation bar). Once slide #2 kicks in, the slideshow adjusts to its correct size. It only happens when viewed in smaller view ports. I haven't touched your code since this morning, but I have been editing the css file. Could this be the problem?

http://www.ianzitidesign.com/test/index-fluid.html

jscheuer1
07-30-2013, 03:54 AM
OK, replace:


<!-- This code changes the background color from black to white and makes the slide images scalable -->
<style type="text/css">
#banner, .gallerylayer {
background-color: white !important;
}
.gallerylayer img {
height: auto !important;
width: auto !important;
max-width: 100%;
vertical-align: bottom;
}
.descpanelfg {
margin-left: 33px;
}
</style>
<!-- End image scalability and background color change code -->



with:


<!-- styles for slideshow -->
<style type="text/css">
#banner, .gallerylayer {
background-color: white !important; /* change bg color to white */
}
.gallerylayer img { /* make slide images scalable */
height: auto !important;
width: auto !important;
max-width: 100%;
vertical-align: bottom;
margin-top: 0 !important; /* ensure a slide image is always at the top of the #banner container */
}
.descpanelfg {
margin-left: 33px; /* provide left margin for description text */
}
</style>
<!-- End slideshow styles -->



The key part is the overriding margin-top: 0 !important; style for the images, that prevents the first one from appearing too low in the situation you mentioned.

Though not required to fix this, I would also recommend updating to this code for the new fadeSlidShow() call:


var mygallery=new fadeSlideShow({
wrapperid: "banner", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 350], //width/height of gallery in css dimensional values.
imagearray: [
["images/banner_A.jpg", "", "", "Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here "],
["images/banner_B.jpg", "", "", "Information about banner image B goes here"],
["images/banner_C.jpg", "", "", "Information about banner image C goes here"],
["images/banner_D.jpg", "", "", "Information about banner image D goes here"]//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:5000, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 500, //transition duration (milliseconds)
descreveal: "ondemand",
//this code targets a hotspot on mouseover for pop-up descriptions and resizes the show based upon width of the parent div
oninit: function(){
var descvis, g = this, s = g.setting, $wrap = s.$wrapperdiv, $desc = s.$descpanel, h, mm,
$dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
$wrap.css({height: (h = $wrap.width() * 350 / 960)});
if((mm = $wrap.data('mm'))){$wrap.unbind('mousemove', mm).unbind('mouseleave', $wrap.data('ml'));
} else {
jQuery(window).resize(function(){s.oninit.apply(g);});
function stripwidth($el){
var extras = ['borderRightWidth', 'borderLeftWidth', 'marginRight', 'marginLeft', 'paddingRight', 'paddingLeft'],
el = extras.length, extra = 0, v;
while(--el > -1){v = parseFloat($el.css(extras[el])); extra += isNaN(v)? 0 : v;}
return extra;
}
s.descwidthminus = [stripwidth($dbg.height('200%')), stripwidth($dfg)];
}
$wrap.data({mm: function(e){
var o = $wrap.offset(), x = e.pageX, y = e.pageY, top = o.top + h - 25, left = o.left + 25,
evt = x < left && y > top? 'mouseenter' : y <= top && descvis || !descvis? 'mouseleave' : null;
evt && $wrap.trigger(evt);
descvis = evt !== 'mouseleave';
s.ismouseover = true;
}, ml: function(){descvis = false;}});
$wrap.trigger('mouseleave').mousemove($wrap.data('mm')).mouseleave($wrap.data('ml'));
this.showhidedescpanel('hide', 0);
$dbg.width($desc.width() - s.descwidthminus[0]);
$dfg.add(s.$measure).width($desc.width() - s.descwidthminus[1]).css('marginLeft', $dfg.css('marginLeft'));
},
togglerid: ""
})



It is, as I mentioned before more efficient. And it now includes a method to correctly set the width of the description foreground and background divs so that not only are they not too narrow (if switching from a narrower window onload to a wider one via resizing - that part was already working), but also (by taking into account their border, padding, and/or margin - if they have any of those, which they currently do) not too wide, which is important if there is more than one line in a description, or even a line that is the width of the slideshow, as without this fine tuning, part of the ends of long description lines would become hidden on the left.

One final tweak, for now at least, I've updated the main script again to use a loading div (with the background the loading image centered, instead of an img tag which the script would then have to calculate the scalar dimensions of the show to properly center). This allows the loading image to appear centered regardless of the width or height of the scalable slideshow at load time (right click and 'Save As'):

5162

I did this because while testing the problem you mentioned I emptied the cache, which caused the loading image to appear briefly as the slide images loaded. It was off center low, just like the image was, and the css that fixed that for slide image did not correct things for the loading image.

More2Do
07-30-2013, 05:40 AM
John, this works beautifully...I'm back in business. Thank you so much for your support! -Jon

More2Do
07-30-2013, 01:36 PM
Hi John,

Sorry, I just noticed one more issue. On slide #1, the peekaboo option shows the content for all four slides. Any fix for this?

Thanks, as always!

jscheuer1
07-30-2013, 03:10 PM
I either don't understand or no it doesn't. I changed the description for slide 1 to (and you copied it from my post):


Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here Information about banner image A goes here

That's not all 4, it's what it was, only repeated many times to show what happens when a description is more than one line due to wrapping. And that happens whether 'peekaboo' or 'ondemand' are used for the descreveal option, though I don't think you were really meaning that, though you might have been, just that it looked wrong.

So, all you need to do to 'fix' it, is to change the description for slide 1 back to:


Information about banner image A goes here

If I've misunderstood though, please clarify.



And I'm glad you asked about that because I just discovered when the description is tall like that, and the mouse moves over it, if the mouse goes beyond the preset height of the hotspot, the description disappears, even if the mouse is still over the description. To fix that, change (in the on page oninit code):


var o = $wrap.offset(), x = e.pageX, y = e.pageY, top = o.top + h - 25, left = o.left + 25,

to:


var o = $wrap.offset(), x = e.pageX, y = e.pageY, top = Math.min($desc.offset().top, o.top + h - 25), left = o.left + 25,



Which reminds me of something I may not have ever mentioned before about the hotspot code that we came up with before that's adapted for use in this responsive design, or that if I did, it bears repeating. See those two 25's in there? Those are the offsets, the first is how far from the bottom of the slideshow that the hotspot ends, and the second is how far from the left of the slideshow that the hotspot ends. 25 seems good for both given your current hotspot, but if that changes, these could be adjusted if need be.

In other words, leave those alone, but in the future, if you change the hotspot, you may have to tweak them.

Also be aware that, since the hotspot is virtually on the left edge and bottom, I chose to calculate the other 2 limits as the bottom and left respectively, rather not calculate them because if the mouse is within the bounds of the 25's limits and is still over the slideshow, it qualifies as being over the hotspot. But if the hotspot moves to another position, these other two coordinate limits would have to be calculated.

Again, nothing to worry about with the hotspot where it is now.

Added Later:

I've updated the script again:

5164

Now we no longer need the style:


.gallerylayer img { /* make slide images scalable */
height: auto !important;
width: auto !important;
max-width: 100%;
vertical-align: bottom;
margin-top: 0 !important; /* ensure a slide image is always at the top of the #banner container */
}



Which is good just in case the a slide image ever needs to be centered within the slideshow after that image is scaled.

And I saw before where you had edited the script (and then later changed it back) to get it to look a little better with one line descriptions - added padding so that the little i symbol was completely covered when a description was visible. You don't need to edit the script for that, instead add the highlighted styles to our style section:


<!-- styles for slideshow -->
<style type="text/css">
#banner, .gallerylayer {
background-color: white !important; /* change bg color to white */
}
.gallerylayer img { /* make slide images scalable */
height: auto !important;
width: auto !important;
max-width: 100%;
vertical-align: bottom;
}
.descpanelfg {
margin-left: 33px; /* provide left margin for description text */
padding-top: 8px !important; /* with below and bg div below that, make the desc bg cover the trigger image */
top: -3px !important;
}
.descpanelbg {
padding-top: 8px !important;
}
</style>
<!-- End slideshow styles -->



This method is a little more targeted than what you were doing before in the script (which means it's less likely to have undesirable side effects), and easier to change/tweak if need be.

MissElenaT
10-15-2013, 04:06 AM
Hello John,

first of all, thank you very much for the info you posted, I was able to make the slideshow a responsive one!
Now I would only have a problem: if I add more than one slideshow to the same page, only the first one works. They have of course different IDs, but only the one I place first in the
var mygallery=new fadeSlideShow({ code works.
May I ask for your help? If you could show me the correct way to implement two (or more) different responsive slideshows on the same page, I would be much obliged to you. I used to do that with the non-responsive code, and it worked... unfortunately, I have no idea how to make the same work with your beautiful responsive code.
Could you please help me?

Thank you so much,
Elena

jscheuer1
10-15-2013, 06:06 AM
I was just glancing back over the information in this thread and I don't see anything that would cause that to happen, but I might have missed something.

Are you sure it's this code? Are you sure it would work if you weren't using any of the modifications in this thread?

Do you have two separate div's, each with its own unique wrapperid for each slideshow?

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

MissElenaT
10-15-2013, 10:10 AM
I was just glancing back over the information in this thread and I don't see anything that would cause that to happen, but I might have missed something.

Are you sure it's this code? Are you sure it would work if you weren't using any of the modifications in this thread?

Do you have two separate div's, each with its own unique wrapperid for each slideshow?

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.


The website has not yet been released; would it do if I posted the code? If it doesn't help, I will use my own website to show the problem.

This is the code that doesn't work (only the first var slideshow works, and like a charm, but the second one doesn't appear):



<script type="text/javascript" src="/wp-content/themes/organic_photographer/js/fadeslideshowresp.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">

var mygallery=new fadeSlideShow({
wrapperid: "first-slideshow", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 783], //width/height of gallery in css dimensional values.
imagearray: [
["http://mtsite.com/wp-content/uploads/23-1.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-2.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-3.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-4.jpg", "", "", ""]//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "always",
//this code targets a hotspot on mouseover for pop-up descriptions and resizes the show based upon width of the parent div
oninit: function(){
var descvis, g = this, s = g.setting, $wrap = s.$wrapperdiv, $desc = s.$descpanel, h, mm,
$dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
$wrap.css({height: (h = $wrap.width() * 783 / 900)});
if((mm = $wrap.data('mm'))){$wrap.unbind('mousemove', mm).unbind('mouseleave', $wrap.data('ml'));
} else {
jQuery(window).resize(function(){s.oninit.apply(g);});
function stripwidth($el){
var extras = ['borderRightWidth', 'borderLeftWidth', 'marginRight', 'marginLeft', 'paddingRight', 'paddingLeft'],
el = extras.length, extra = 0, v;
while(--el > -1){v = parseFloat($el.css(extras[el])); extra += isNaN(v)? 0 : v;}
return extra;
}
s.descwidthminus = [stripwidth($dbg.height('200%')), stripwidth($dfg)];
}
$wrap.data({mm: function(e){
var o = $wrap.offset(), x = e.pageX, y = e.pageY, top = o.top + h - 25, left = o.left + 25,
evt = x < left && y > top? 'mouseenter' : y <= top && descvis || !descvis? 'mouseleave' : null;
evt && $wrap.trigger(evt);
descvis = evt !== 'mouseleave';
s.ismouseover = true;
}, ml: function(){descvis = false;}});
$wrap.trigger('mouseleave').mousemove($wrap.data('mm')).mouseleave($wrap.data('ml'));
this.showhidedescpanel('hide', 0);
$dbg.width($desc.width() - s.descwidthminus[0]);
$dfg.add(s.$measure).width($desc.width() - s.descwidthminus[1]).css('marginLeft', $dfg.css('marginLeft'));
},
togglerid: ""
})


var mygallery=new fadeSlideShow({
wrapperid: "second-slideshow", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 783], //width/height of gallery in css dimensional values.
imagearray: [
["http://mysite.com/wp-content/uploads/23-11.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-22.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-37.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-42.jpg", "", "", ""]//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "always",
//this code targets a hotspot on mouseover for pop-up descriptions and resizes the show based upon width of the parent div
oninit: function(){
var descvis, g = this, s = g.setting, $wrap = s.$wrapperdiv, $desc = s.$descpanel, h, mm,
$dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
$wrap.css({height: (h = $wrap.width() * 783 / 900)});
if((mm = $wrap.data('mm'))){$wrap.unbind('mousemove', mm).unbind('mouseleave', $wrap.data('ml'));
} else {
jQuery(window).resize(function(){s.oninit.apply(g);});
function stripwidth($el){
var extras = ['borderRightWidth', 'borderLeftWidth', 'marginRight', 'marginLeft', 'paddingRight', 'paddingLeft'],
el = extras.length, extra = 0, v;
while(--el > -1){v = parseFloat($el.css(extras[el])); extra += isNaN(v)? 0 : v;}
return extra;
}
s.descwidthminus = [stripwidth($dbg.height('200%')), stripwidth($dfg)];
}
$wrap.data({mm: function(e){
var o = $wrap.offset(), x = e.pageX, y = e.pageY, top = o.top + h - 25, left = o.left + 25,
evt = x < left && y > top? 'mouseenter' : y <= top && descvis || !descvis? 'mouseleave' : null;
evt && $wrap.trigger(evt);
descvis = evt !== 'mouseleave';
s.ismouseover = true;
}, ml: function(){descvis = false;}});
$wrap.trigger('mouseleave').mousemove($wrap.data('mm')).mouseleave($wrap.data('ml'));
this.showhidedescpanel('hide', 0);
$dbg.width($desc.width() - s.descwidthminus[0]);
$dfg.add(s.$measure).width($desc.width() - s.descwidthminus[1]).css('marginLeft', $dfg.css('marginLeft'));
},
togglerid: ""
})

</script>

Please note I'm calling the latest javascript on another part of the head, and repeating it above the given code was causing problems, so I removed that (in both the working and non-working code). The non-responsive code has always worked, so that seems to be no problem at all.

Here is the html, that will work for both the responsive and non responsive code:


<center><div id="first-slideshow" style="margin-top: 15px;"></div></center><br/>

--- (other text in here on the page, so the div are separate)

<center><div id="second-slideshow" style="margin-top: 15px;"></div></center><br/>



And here is the old non-responsive code that worked:


<script type="text/javascript" src="/wp-content/themes/organic_photographer/js/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">

var mygallery=new fadeSlideShow({
wrapperid: "first-slideshow", //ID of blank DIV on page to house Slideshow
dimensions: [900, 783], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://mtsite.com/wp-content/uploads/23-1.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-2.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-3.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-4.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})

var mygallery=new fadeSlideShow({
wrapperid: "second-slideshow", //ID of blank DIV on page to house Slideshow
dimensions: [900, 750], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["http://mysite.com/wp-content/uploads/23-11.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-22.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-37.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-42.jpg", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})

</script>



Maybe there's something very easy that I am missing... in the second code I posted, both slideshows appear and work (but they are not responsive). In the first code I posted, only the first slideshow appears, but it works perfectly and is responsive.


My specific css (copied from your latest post)


#banner, .gallerylayer {
background-color: white !important; /* change bg color to white */
}
.gallerylayer img { /* make slide images scalable */
height: auto !important;
width: auto !important;
max-width: 100%;
vertical-align: bottom;
margin-top: 0 !important; /* ensure a slide image is always at the top of the #banner container */
}
.descpanelfg {
margin-left: 33px; /* provide left margin for description text */
}


Any hint and advice would be much helpful. If this code isn't helpful I will recreate the problem. Both fadeslideshowresp.js and fadeslideshow.js are in the correct js folder of the WP theme...

Thank you SO MUCH!

Elena

jscheuer1
10-15-2013, 12:51 PM
I'm surprised that either of them work. Someone else tried copying this idea and failed with only one slideshow. The reason was that they had no captions/descriptions. This code (the code in this thread so far) assumes descriptions, and assumes a specific way of handling them (instead of one of the optional methods available in the original script, they are triggered only when the user moves their mouse over a hotspot on the image). For the person who wanted to use it without descriptions I devised this oninit code:


//this code resizes the show based upon width of the parent div
oninit: function(){
var g = this, s = g.setting, $wrap = s.$wrapperdiv;
$wrap.height($wrap.width() * 340 / 690); //ratio for images (native dimensions height / width)
if(!s.$descpanel || !s.$descpanel.length){
if(!$wrap.data('descwidthsetup')){
jQuery(window).resize(function(){s.oninit.apply(g);});
$wrap.data('descwidthsetup', true);
}
return;
}
var $desc = s.$descpanel, $dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
if(!$wrap.data('descwidthsetup')){
jQuery(window).resize(function(){s.oninit.apply(g);});
function stripwidth($el){
var extras = ['borderRightWidth', 'borderLeftWidth', 'marginRight', 'marginLeft', 'paddingRight', 'paddingLeft'],
el = extras.length, extra = 0, v;
while(--el > -1){v = parseFloat($el.css(extras[el])); extra += isNaN(v)? 0 : v;}
return extra;
}
s.descwidthminus = [stripwidth($dbg.height('200%')), stripwidth($dfg)];
}
$wrap.data({descwidthsetup: 'setup'});
$wrap.trigger('mouseleave');
this.showhidedescpanel('hide', 0);
$dbg.width($desc.width() - s.descwidthminus[0]);
$dfg.add(s.$measure).width($desc.width() - s.descwidthminus[1]).css('marginLeft', $dfg.css('marginLeft'));
},



It will work with or without descriptions and will use the normal descriptions if present, following whichever optional method for the descriptions is set. I'm thinking that your first slideshow had at least one description in it. That's why it worked, and that the second had none. But that you gave me two examples with no descriptions, thinking that made no difference to the functionality. Try it like so:


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "first-slideshow", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 783], //width/height of gallery in css dimensional values.
imagearray: [
["http://mtsite.com/wp-content/uploads/23-1.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-2.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-3.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-4.jpg", "", "", ""]//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "always",
//this code resizes the show based upon width of the parent div
oninit: function(){
var g = this, s = g.setting, $wrap = s.$wrapperdiv;
$wrap.height($wrap.width() * 340 / 690); //ratio for images (native dimensions height / width)
if(!s.$descpanel || !s.$descpanel.length){
if(!$wrap.data('descwidthsetup')){
jQuery(window).resize(function(){s.oninit.apply(g);});
$wrap.data('descwidthsetup', true);
}
return;
}
var $desc = s.$descpanel, $dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
if(!$wrap.data('descwidthsetup')){
jQuery(window).resize(function(){s.oninit.apply(g);});
function stripwidth($el){
var extras = ['borderRightWidth', 'borderLeftWidth', 'marginRight', 'marginLeft', 'paddingRight', 'paddingLeft'],
el = extras.length, extra = 0, v;
while(--el > -1){v = parseFloat($el.css(extras[el])); extra += isNaN(v)? 0 : v;}
return extra;
}
s.descwidthminus = [stripwidth($dbg.height('200%')), stripwidth($dfg)];
}
$wrap.data({descwidthsetup: 'setup'});
$wrap.trigger('mouseleave');
this.showhidedescpanel('hide', 0);
$dbg.width($desc.width() - s.descwidthminus[0]);
$dfg.add(s.$measure).width($desc.width() - s.descwidthminus[1]).css('marginLeft', $dfg.css('marginLeft'));
},
togglerid: ""
})


var mygallery2=new fadeSlideShow({
wrapperid: "second-slideshow", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 783], //width/height of gallery in css dimensional values.
imagearray: [
["http://mysite.com/wp-content/uploads/23-11.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-22.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-37.jpg", "", "", ""],
["http://mysite.com/wp-content/uploads/23-42.jpg", "", "", ""]//<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1000, //transition duration (milliseconds)
descreveal: "always",
//this code resizes the show based upon width of the parent div
oninit: function(){
var g = this, s = g.setting, $wrap = s.$wrapperdiv;
$wrap.height($wrap.width() * 340 / 690); //ratio for images (native dimensions height / width)
if(!s.$descpanel || !s.$descpanel.length){
if(!$wrap.data('descwidthsetup')){
jQuery(window).resize(function(){s.oninit.apply(g);});
$wrap.data('descwidthsetup', true);
}
return;
}
var $desc = s.$descpanel, $dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
if(!$wrap.data('descwidthsetup')){
jQuery(window).resize(function(){s.oninit.apply(g);});
function stripwidth($el){
var extras = ['borderRightWidth', 'borderLeftWidth', 'marginRight', 'marginLeft', 'paddingRight', 'paddingLeft'],
el = extras.length, extra = 0, v;
while(--el > -1){v = parseFloat($el.css(extras[el])); extra += isNaN(v)? 0 : v;}
return extra;
}
s.descwidthminus = [stripwidth($dbg.height('200%')), stripwidth($dfg)];
}
$wrap.data({descwidthsetup: 'setup'});
$wrap.trigger('mouseleave');
this.showhidedescpanel('hide', 0);
$dbg.width($desc.width() - s.descwidthminus[0]);
$dfg.add(s.$measure).width($desc.width() - s.descwidthminus[1]).css('marginLeft', $dfg.css('marginLeft'));
},
togglerid: ""
})

</script>



The browser cache may need to be cleared and/or the page refreshed to see changes.

If you're still having problems and want more help, please put up that demo on your own site like you mentioned you could in your last post, so I can more easily troubleshoot it.


BTW, you're not supposed to have two mygallery=, I changed the second one to mygallery2=, but that shouldn't have any effect one way or another and is only important if you want a reference to each slideshow in order to be able to control it from other javascript later.

In fact you can skip the:


var mygallery=

completely unless, as I say you want a reference to it later. The script itself and this modification doesn't require it.

MissElenaT
10-15-2013, 01:00 PM
John, thank you so much. I will try your code right away. I can ensure you, though: those are the exact codes I used, there are no descriptions at all.
The only thing I changed in the code I posted is the picture url, renaming the actual site "mysite.com" - other than that, it is the code that is functioning at my end. The second one perfectly, but not responsively; the one you built like a charm, but only for the first var slideshow.

I will try your new code and let you know. Thank you very much for being so kind!

MissElenaT
10-15-2013, 01:30 PM
Sorry for the unnecessary quoting, I see you edited my message - I promise I won't do it again!

I have tried your code (the only change I made is in the aspect ratio, entering the actual width/height of my own pictures) and it works beautifully. Both slides show, both are responsive. THANK YOU!!!

The only thing is that I now see a lot of white space under both slides. If I try using Firebug, this is what I get (for slideshow 1, for instance):


<center>
<div id="first-slideshow" style="margin-top: 15px; position: relative; visibility: visible; background: none repeat scroll 0% 0% black; overflow: hidden; width: 100%; height: 1080px;">
<div class="gallerylayer" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0% 0% black; z-index: 1000; opacity: 1;">
<div class="gallerylayer" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0% 0% black; z-index: 999; opacity: 1;">
<div style="position: absolute; width: 100%; height: 100%; z-index: 2000; top: 0px; left: 0px; background: url("loading.gif") no-repeat scroll center center transparent; display: none;"></div>
</div>
</center>

I believe the problem lies in this "height: 1080px", but the actual height of the image is 750 (I tried your code putting in slideshow 1 other pictures, so that slideshow one has pictures of 900x750 and slideshow two has the normal 900x783 pictures... just to make sure it would work with any sizes on the same page)... is there a way I can get rid of this?

The two "gallerylayer" divs change and are, I think, the slides that are about to scroll. Everything works beautifully, there's just this 1080 I can't really understand. It may very well be due to something I set wrong, but I'm pretty sure I entered all of the information correctly inside your code.

I've just tried using Firebug with the second slideshow, this is the first part of the code I get:


<div id="second-slideshow" style="margin-top: 15px; position: relative; visibility: visible; background: none repeat scroll 0% 0% black; overflow: hidden; width: 100%; height: 1034.48px;">

Any ideas? Thank you so very much.

MissElenaT
10-15-2013, 02:11 PM
I've just tried to add max-height: 100%; to the css I previously posted:


#banner, .gallerylayer {
background-color: white !important; /* change bg color to white */
}
.gallerylayer img { /* make slide images scalable */
height: auto !important;
width: auto !important;
max-width: 100%;
max-height: 100%;
vertical-align: bottom;
margin-top: 0 !important; /* ensure a slide image is always at the top of the #banner container */
}
.descpanelfg {
margin-left: 33px; /* provide left margin for description text */
}

with no results, unfortunately. I'm open to any suggestion and willing to try any piece of code you may wish me to :) Thank you so much for your help!

jscheuer1
10-15-2013, 02:58 PM
As I said before, this was originally for a specific request, even the css was tailored for it. Using max width or height will sometimes limit an image to be no more than its native size in that dimension. I think that's what's happening here. Let's see what css I gave to the person who was not trying to fit into a container that would never be larger than the images used. OK, I think I found it:


.gallerylayer img { /* make slide images scalable */
height: auto !important;
width: 100% !important;
vertical-align: bottom;
max-width: none;
}

Here's a demo if it's still up (is right now, I just checked):

http://www.digitalprecision.ca/newindex.php

Again, if you would put up a live demo, I can see what's happening and have a better chance of tailoring a solution to what you are doing.

MissElenaT
10-15-2013, 04:02 PM
You are right John, sorry for not putting up a live demo before. You can find one here (http://iwantacoolwebsite.com/test.php): I put it live on a place where I have almost nothing, just so we can make sure no other script or no plugin affects the code. Here there is no WordPress either, but the bottom margin problem is the same I have on the non-live site.

Could you please help me? Thank you so much!

P.S. I tried to replace the css with your code both there and here; it seems not to solve the problem :( Thank you!!

jscheuer1
10-15-2013, 04:20 PM
The ratio here:


$wrap.height($wrap.width() * 900 / 750); //ratio for images (native dimensions height / width)

Needs to be height over width, not width over height as you have it, make that:


$wrap.height($wrap.width() * 750 / 900); //ratio for images (native dimensions height / width)

Also, using <center> is deprecated. It could throw off some older browsers. Change:


<center><div id="first-slideshow" style="margin-top: 15px;"></div></center><br/>
<h2>Other text here</h2>
<p>Text text text</p>
<center><div id="second-slideshow" style="margin-top: 15px;"></div></center><br/>

to:


<div id="first-slideshow" style="margin: 15px auto 0 auto;"></div><br/>
<h2>Other text here</h2>
<p>Text text text</p>
<div id="second-slideshow" style="margin: 15px auto 0 auto;"></div><br/>

MissElenaT
10-15-2013, 04:36 PM
John, thank you sooooo very much!!! How could I be so stupid? I should have checked better. Thank you!!!

As for the <center>, you are most right. Thank you very much for your suggestion. I normally use <div align="center">, but I've found the <center> tag to be more effective. Now that I now about the margin thing, I will always do it that way. Thank you!

I would have a last question... would you be so kind to help me identify the code that needs to be removed in order to disable completely the feature which stops the slideshow when you hover the mouse over a picture?

Many, many thanks! Greetings from Italy!

Elena

jscheuer1
10-15-2013, 08:15 PM
Just add the highlighted (two places) as shown to the oninit (the first covers if there are no descriptions, the second, if there are):


//this code resizes the show based upon width of the parent div
oninit: function(){
var g = this, s = g.setting, $wrap = s.$wrapperdiv;
$wrap.height($wrap.width() * 750 / 900); //ratio for images (native dimensions height / width)
if(!s.$descpanel || !s.$descpanel.length){
if(!$wrap.data('descwidthsetup')){
jQuery(window).resize(function(){s.oninit.apply(g);});
$wrap.data('descwidthsetup', true);
$wrap.bind('mouseenter', function(){setTimeout(function(){s.ismouseover=false;}, 0);});
}
return;
}
var $desc = s.$descpanel, $dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
if(!$wrap.data('descwidthsetup')){
jQuery(window).resize(function(){s.oninit.apply(g);});
function stripwidth($el){
var extras = ['borderRightWidth', 'borderLeftWidth', 'marginRight', 'marginLeft', 'paddingRight', 'paddingLeft'],
el = extras.length, extra = 0, v;
while(--el > -1){v = parseFloat($el.css(extras[el])); extra += isNaN(v)? 0 : v;}
return extra;
}
s.descwidthminus = [stripwidth($dbg.height('200%')), stripwidth($dfg)];
$wrap.bind('mouseenter', function(){setTimeout(function(){s.ismouseover=false;}, 0);});
}
$wrap.data({descwidthsetup: 'setup'});
$wrap.trigger('mouseleave');
this.showhidedescpanel('hide', 0);
$dbg.width($desc.width() - s.descwidthminus[0]);
$dfg.add(s.$measure).width($desc.width() - s.descwidthminus[1]).css('marginLeft', $dfg.css('marginLeft'));
},



That way you can disable it only for those slideshows that you want to disable it for. If you want both slideshows' pause disabled, make sure to make the change to both oninit functions.

MissElenaT
10-15-2013, 09:49 PM
Thank you so much, John!!!!!

MissElenaT
11-28-2013, 05:13 AM
Hello John,

it's me again :) First of all: Happy Thanksgiving!

The code you previously gave me still works like a charm. I'm having a problem on a site (not live yet), basically the first slide doesn't appear (on Firefox I do see only about 40px of it, because it looks like it's being pushed down by something). Then, from the second cycle, everything works perfectly (that is: that same image works great).
I'm more than sure this has nothing to do with your code (which works great anywhere else), but I thought maybe you could suggest what may be causing this strange behavior. Any tip will be more than appreciated.
Thank you so much!

Elena

MissElenaT
12-08-2013, 11:00 AM
Problem solved :)

I couldn't find the css code that was causing this behavior (Firebug didn't help me, either), so I added to the slideshow unique div "margin: 0 !important".
That did the trick.

I hope the solution is helpful for other people having similar problems.

All the best,
Elena

DivisionSix.com
12-16-2013, 07:33 PM
We need an addition to this. I noticed that the background canvas was maintaining its full height when I shrunk the browser window down to mobile phone dimensions. Also, when loading the page on my mobile. So, a bit of JQuery code to correct the scale height and this all works like a charm! Note that I called my containing DIV 'fadeshow1'.


jQuery(document).ready(function($){
jQuery(window).resize(function(){
var newHeight = $('.gallerylayer img').height();
$('#fadeshow1').css("height",newHeight);
});
});