Full Width Slideshow

[BelowZero]

I've been using the Ultimate FadeIn Slideshow on a couple of sites and it works well. I'd be interested in knowing if there is such a slideshow script that defaults to full width so that no matter the browser, the images will be full width on my site. I've found several scripts for full backgrounds but can't find much on a full width slideshow. Anyone know where I can locate such a thing? Thanks.

[jscheuer1]

Well, there is this version of the script:

5196

Which allows you to specify each of the dimensions for the slideshow as unquoted numbers (like before) or as quoted css values.

But that only takes care of part of the work, the rest needs to be done in the on page new fadeSlideShow() call, which is where you will set the dimensions and also a ratio to get the images/slideshow to resize proportionally on load and resize, and in css style to make the images in the slideshow scalable.

So you say you want the slideshow full width. Then you would do like so on the page (use your own images and descriptions):


<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "banner", //ID of blank DIV on page to house Slideshow
dimensions: ['100%', 350], //width, height of gallery in jQuery css dimensional values
imagearray: [
["banner_A.jpg", "", "", "Information about banner image A goes here"],
["banner_B.jpg", "", "", "Information about banner image B goes here"],
["banner_C.jpg", "", "", "Information about banner image C goes here"],
["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 resizes the show based upon width of the parent div
oninit: function(){
var g = this, s = g.setting, $wrap = s.$wrapperdiv, $desc = s.$descpanel, h, $dbg = $desc.find('div.descpanelbg'), $dfg = s.$descinner;
$wrap.css({height: (h = $wrap.width() * 350 / 960)}); //ratio for images (native dimensions height / width)
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>



Notice the two highlighted lines. For the first, set the red part width to '100%' and the height to the native height of the images (all images must be the same dimensions for this to work well). For the second, set the red part to the image's native height / the images native width. This will be used to adjust the height of the slideshow and the images for different widths. So the first is 'width%', height and the second height / width.

Finally, add this to a stylesheet for the page:


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



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

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.

[BelowZero]

Wow, John!

Thanks so much. I hope this is just what I'm looking for.

There is a problem that I'm assuming is in the html. Nothing is being displayed.
Just to be sure, the code you provided belongs between the head tags, correct?

Here is the link to the page:
http://www.digitalprecision.ca/newindex.php

I'm looking to make the slideshow appear in the black area.

Thanks, again.

[jscheuer1]

.
Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the page(s) using the script. Please reinstate the notice first.

OK, you have some typos (two that impact this), I had one in the on page script, and the styles I gave you were for another implementation of this and need to be adjusted for yours. There's also an error somewhere, probably in the updated script, that I have yet to track down, but it's non-fatal.

So to get this working, add the missing </script> tag and credit here:


<script type="text/javascript" src="/A-Javascript/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>

Remove this no longer used code from a previous version of the script (it's in the body in the slideshow div):


<script type="text/javascript">
//new fadeSlideShow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeSlideShow(fadeimages, 1000, 375, 2, 6000, 1, "R")
</script>



My typo is here:


if(!$wrap.data('descwidthsetup'){

Which is missing a ) in it (added in red here):


if(!$wrap.data('descwidthsetup')){

I'm going to edit in my previous post, so if there's any doubt, you can copy the corrected version from there.

And the css should be:


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

I'll get back to you when I trace down that non-fatal error. I think it's preventing the descriptions from appearing on mouseover.

OK, I have a fix for it, 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>


Also you are missing the helper images:

x.png
restore.png
loading.gif

You can get them from the demo page.

[BelowZero]

Awesome! Works like a charm and just what I was looking for.
Yesterday I thought I'd have to scrap this idea and today it's done.
I appreciate your help!

Now for the next issue. Nothing below the slideshow is showing. There should be more content after the slideshow, but it is not being shown. Any ideas?

btw, the helper images are in my images directory. Is there a way to get the script to point to them there, or do I have to leave them in the root directory?

[jscheuer1]

Sure! Using a text only editor like NotePad, edit the fadeslideshowresp.js file. Where it has (near the beginning around line #16):


var fadeSlideShow_descpanel={
controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
loadingfadeoutspeed: 800, // duration of loading image fade out once first image has loaded
slidespeed: 200 //speed of description panel animation (in millisec)
}

add the path. Like if your images folder is (I looked for the images folder and didn't find it, so if it were):

http://www.digitalprecision.ca/Images/

You could put:


var fadeSlideShow_descpanel={
controls: [['/Images/x.png',7,7], ['/Images/restore.png',10,11], ['/Images/loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
loadingfadeoutspeed: 800, // duration of loading image fade out once first image has loaded
slidespeed: 200 //speed of description panel animation (in millisec)
}

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

[BelowZero]

Great. Thanks.

Now for the next issue. Nothing below the slideshow is showing. There should be more content after the slideshow, but it is not being shown. Any ideas?

[jscheuer1]

Where you have:


<div id="slideshow">
<div><!--slideshow-->

That needs to be:


<div id="slideshow">
</div><!--slideshow-->

Also I noticed (has nothing to do with this problem):


<meta name="description" content=."Digital Precision Metrology serves western Canada>

That red dot should not be there.

And, also not directly related, HTML comments are supposed to include leading and trailing spaces. For example:


<!-- linkhome -->

NOT:


<!--linkhome-->

This probably has no effect here, except perhaps in older browsers.

[BelowZero]

You're an amazing man! Thanks so much. This is turning out just as I had hoped.

You failed to admonish me however for letting the cat walk across the keyboard adding dots and erasing slashes. Consider my hand slapped.

[BelowZero]

I'm going re-visit this thread. Everything is working fine on several websites, however there is a new problem I hope someone can help with.
The slideshow adjusts to the width of any browser and screen resolution however the height does not adjust.
The lower the resolution gets, the less picture is viewable. Is there a way to adjust for picture height as well as width??
Thanks, again.