Results 1 to 9 of 9

Thread: Full Width Slideshow

  1. #1
    Join Date
    Nov 2009
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Full Width Slideshow

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,191 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Well, there is this version of the script:

    fadeslideshowresp.js

    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):

    Code:
    <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:

    Code:
    .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.
    Last edited by jscheuer1; 08-28-2013 at 08:15 PM. Reason: typo, correct style
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2009
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.
    Last edited by jscheuer1; 09-27-2013 at 04:40 PM. Reason: Format

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,191 Times in 3,155 Posts
    Blog Entries
    12

    Default

    .
    Your page is in violation of Dynamic Drive's usage terms, 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:

    Code:
    <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):

    Code:
    		<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:

    Code:
    		if(!$wrap.data('descwidthsetup'){
    Which is missing a ) in it (added in red here):

    Code:
    		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:

    Code:
    .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:

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

    Code:
    <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.
    Last edited by jscheuer1; 08-28-2013 at 08:27 PM. Reason: fix typo in typo correction, add last fix and helper images
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2009
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by BelowZero; 08-28-2013 at 09:08 PM.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,191 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    Code:
    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Nov 2009
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,191 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Where you have:

    Code:
    	<div id="slideshow">	
    	<div><!--slideshow-->
    That needs to be:

    Code:
    	<div id="slideshow">	
    	</div><!--slideshow-->
    Also I noticed (has nothing to do with this problem):

    Code:
    <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:

    Code:
    <!-- linkhome -->
    NOT:

    Code:
    <!--linkhome-->
    This probably has no effect here, except perhaps in older browsers.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Nov 2009
    Posts
    22
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Replies: 0
    Last Post: 03-02-2013, 10:55 AM
  2. Looking for multi-functional slideshow - full screen, customizable appearance, etc.
    By tnd1000 in forum Looking for such a script or service
    Replies: 8
    Last Post: 10-19-2012, 10:41 PM
  3. Replies: 4
    Last Post: 12-01-2011, 01:57 PM
  4. Resolved Full width CSS menu bar?
    By mlegg in forum CSS
    Replies: 6
    Last Post: 02-26-2011, 06:29 PM
  5. Lightbox v2.03a opacity doesn't span full width?
    By vikenk in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-23-2007, 07:56 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •