Results 1 to 3 of 3

Thread: Image sizing in Continuous Reel Slideshow

  1. #1
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image sizing in Continuous Reel Slideshow

    1) Script Title: Continuous Reel Slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lslideshow.htm

    3) Describe problem:

    Please check lapaz.com.tr

    My images have a width of 1920px. I want to use them full screen and accept that the biggest screen will have this resolution.
    But the images are cut on less resolution screens.

    Is there a way to resize the image after getting the actual dimensions of the browser?

  2. #2
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    This may not suffice in accomplishing what you need, but try out the below modified .js file. It does the following to the .js file:

    1) Adds the code in red to the output markup so that each image scales to 100% the dimensions of the main Reel container:

    Code:
    		var layerHTML=(imgref[1])? '<a href="'+imgref[1]+'" target="'+imgref[2]+'">' : '' //hyperlink slide?
    		layerHTML+='<img src="'+imgref[0]+'" style="border-width:0; width:100%; height:auto" />'
    		layerHTML+=(imgref[1])? '</a>' : ''
    		return '<div class="slide" style="position:absolute;'+posstr+';width:100%;height:100%;text-align:center;">'
    2) Adds a onwindowresize() custom event handler, which you can make use of in the initialization code. Using it, you can reset the dimensions of the Reel container to the appropriate size each time the window is resized, for example:
    Code:
    
    var docwidth = window.innerWidth || document.documentElement.clientWidth
    var docheight = window.innerHeight || document.documentElement.clientHeight
    
    var firstreel=new reelslideshow({
    	wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
    	dimensions: [docwidth, docheight], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg"], //["image_path", "optional_link", "optional_target"]
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2000, cycles:2, pauseonmouseover:true},
    	orientation: "h", //Valid values: "h" or "v"
    	persist: true, //remember last viewed slide and recall within same session?
    	slideduration: 300, //transition duration (milliseconds)
    	onwindowresize:function(wrapper){
    		var docwidth = window.innerWidth || document.documentElement.clientWidth
    		var docheight = window.innerHeight || document.documentElement.clientHeight
    		wrapper.css({width:docwidth , height:docheight })
    	}
    })
    DD Admin

  3. #3
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Worked thank you very much.

    Any comment to IE problem to here?

    http://www.dynamicdrive.com/forums/s...ad.php?t=67269

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
  •