Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 36

Thread: Ultimate Fade-in slideshow image resize

  1. #11
    Join Date
    Jun 2013
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Perhaps my example was not extreme enough to show what I actually wanted to do.

    I want the photos to completely fill the gallery frame. That is why I set the max-height to auto, as in slides-2 below. However I would like the ability to position the photo in the frame by moving it up or sideways.

    http://designline.com.au/news/slides-2.htm

    By changing the max-height to 300px, as in slides-3 below, it means that the photo will not fill the frame.

    http://designline.com.au/news/slides-3.htm

    Thanks,

    Scriptor

  2. #12
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    You can do that. But if you do, you cannot maintain aspect ratio. Change this:

    Code:
    #fadeshow1, #fadeshow1 .gallerylayer {
    background-color: #fff !important; /* set this to the background color behind the slideshow */
    }
    #fadeshow1 .gallerylayer img {
    max-width: 600px; /* set this to the width of the slideshow */
    max-height: 330px; /* set this to the height of the slideshow */
    display: block;
    }
    
    </style>
    to:

    Code:
    <style type="text/css">
    #fadeshow1, #fadeshow1 .gallerylayer {
    background-color: #fff !important; /* OPTIONAL set this to the background color behind the slideshow to avoid a color transition while it loads */
    }
    #fadeshow1 .gallerylayer img {
    width: 100%; /* set this to 100% */
    height: 100%; /* set this to 100% */
    display: block;
    }
    </style>
    - John
    ________________________

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

  3. #13
    Join Date
    Jun 2013
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks John,

    The aspect ratio has to be maintained.

    So I guess what you are saying is, there is no way to actually position the image. The top left-hand corner will always remain 0,0. And, depending on the size of the image, the bottom right-hand corner will tend to be obscured by the limits of the gallery frame. I was hoping there would be a way to set the top left-hand corner of the image to say, -20,-50 or something like that.

    All the best,

    Scriptor

  4. #14
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    You cannot do both.

    You cannot fit an image into a box that has one aspect ratio, and have it fill that box, and have it maintain its aspect ratio unless its aspect ratio is the same as that box's.

    If you want to maintain aspect ratio, then designline.com.au/news/slides-3.htm is the way to go. But for images whose aspect ratio is not (in this casr) 1.1818 (600/330), there will me parts of the box that will not be filled.

    If you must fill the 600x330 box with each image, those that do not have an aspect ratio of 1.1818 will either have to be cropped or have their aspect ratio changed (squished or elongated).

    This is simple plane geometry and cannot be otherwise, no matter how much you might want it to be.

    You could fill the box and maintain aspect ratio and center the image. If it doesn't have the same aspect ratio of the box, it will still be cropped, but cropped evenly on all four sides. That would probably require a script modification, and, as I say the image will still be cropped, which I thought you wanted to avoid. I will work that out for you. But only if cropping and centering is acceptable for images with a different aspect ratio than the slideshow.
    Last edited by jscheuer1; 06-09-2013 at 09:45 AM. Reason: spelling
    - John
    ________________________

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

  5. #15
    Join Date
    Jun 2013
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Yes, I know that cropping will occur. However, the present script crops the bottom and right, if the image is larger than the box. What I'd like to do is have the option to either crop all round (ie. center the image) or crop the top and left-hand side (ie. offset the image). Offsetting the image would be preferable, since there would presumably be more control over where the image is positioned.

    Many thanks.

  6. #16
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
    	showslide:function(keyword){
    		var slideshow=this
    		var setting=slideshow.setting
    		if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
    			setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
    			return
    		}
    		var totalimages=setting.imagearray.length
    		var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
    			: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
    			: Math.min(keyword, totalimages-1)
    		var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
    		var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
    // 	$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
    		$slideimage.css({position:'absolute',top:(setting.dimensions[1]-imgdimensions[1])/2,marginTop:0})
    		$slideimage.css({left:(setting.dimensions[0]-imgdimensions[0])/2,marginLeft:0})
    //		$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
    		if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
    			clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
    			slideshow.showhidedescpanel('hide', 0) //and hide it immediately
    		}
    		setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
    			.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
    				clearTimeout(setting.playtimer)
    				try{
    					setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
    				}catch(e){
    					alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
    				}
    				if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
    					slideshow.showhidedescpanel('show')
    					setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
    				}
    				setting.currentstep+=1
    				if (setting.displaymode.type=="auto"){
    					if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
    						setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
    				}
    			}) //end callback function
    		setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
    		setting.fglayer=setting.bglayer
    		setting.bglayer=(setting.bglayer==0)? 1 : 0
    		setting.curimage=imgindex
    		if (setting.$descpanel){
    			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
    			if (setting.imagearray[imgindex][3]) //if this slide contains a description
    				setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
    		}
    		if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
    			this.paginatecontrol()
    		}
    		if (setting.$status) //if status container defined
    			setting.$status.html(setting.curimage+1 + "/" + totalimages)
    	},
    or

    Code:
    	showslide:function(keyword){
    		var slideshow=this
    		var setting=slideshow.setting
    		if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
    			setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
    			return
    		}
    		var totalimages=setting.imagearray.length
    		var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
    			: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
    			: Math.min(keyword, totalimages-1)
    		var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
    		var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
            document.getElementById(setting.wrapperid).sdtyle.height=imgdimensions[1]+'px';
       	$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
    		$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
    		if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
    			clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
    			slideshow.showhidedescpanel('hide', 0) //and hide it immediately
    		}
    		setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
    			.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
    				clearTimeout(setting.playtimer)
    				try{
    					setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
    				}catch(e){
    					alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
    				}
    				if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
    					slideshow.showhidedescpanel('show')
    					setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
    				}
    				setting.currentstep+=1
    				if (setting.displaymode.type=="auto"){
    					if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
    						setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
    				}
    			}) //end callback function
    		setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
    		setting.fglayer=setting.bglayer
    		setting.bglayer=(setting.bglayer==0)? 1 : 0
    		setting.curimage=imgindex
    		if (setting.$descpanel){
    			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
    			if (setting.imagearray[imgindex][3]) //if this slide contains a description
    				setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
    		}
    		if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
    			this.paginatecontrol()
    		}
    		if (setting.$status) //if status container defined
    			setting.$status.html(setting.curimage+1 + "/" + totalimages)
    	},
    Code:
    #fadeshow1 .gallerylayer img {
    width: 600px; /* set this to the width of the slideshow */
    }
    Last edited by vwphillips; 06-09-2013 at 12:01 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. The Following User Says Thank You to vwphillips For This Useful Post:

    Scriptor (06-09-2013)

  8. #17
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    OK, in your new fadeSlideShow on page call you can add optional crop objects after each image listing in the imagearray:

    Code:
    </script><script type="text/javascript">
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [600, 330], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["background-84604_640.jpg", "", "", ""],
    		["evening-55067_640.jpg", "", "", ""], {crop: 'topleft'},
    		["big-bend-113099_640.jpg", "", "", ""], {crop: 'center'} //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false, randomize:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "peekaboo",
    	togglerid: ""
    })
    </script>
    Use this css:

    Code:
    <style type="text/css">
    #fadeshow1 .gallerylayer img {
    display: block;
    }
    .fadeshow1tall {
    width: 100%; /* set this to 100% */
    height: auto; /* set this to auto */
    }
    .fadeshow1wide {
    width: auto; /* set this to auto */
    height: 100%; /* set this to 100% */
    }
    .fadeshow1even {
    width: 100%; /* set this to 100% */
    height: 100%; /* set this to 100% */
    }
    </style>
    and this script (right click and 'Save As'):

    fadeslideshowratiocrop.js

    Notes:

    If the image fits or is smaller, it will be centered as was always the case. However, if it's smaller it will be made the width of the slideshow and centered vertically unless its height is now greater than the slideshow's, in which case crop, if specified will determine how it's cropped.

    If crop is set for 'topleft' and the image is too large, the top and/or left part will be cropped.

    If crop is set for 'center' and the image is too large it will be center cropped along the vertical and/or horizontal axis.

    If no crop is specified or something other than these two above are used, and the image is too large, it will be cropped off the right and/or bottom edge (what happens normally without this modification).
    Last edited by jscheuer1; 06-09-2013 at 04:46 PM. Reason: uodate script to link back to this thread, detail
    - John
    ________________________

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

  9. #18
    Join Date
    Jun 2013
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thanks John,

    Looks simple enough, but it doesn't seem to work unfortunately. Plus, there is an undefined image after the 3rd photo.

    http://designline.com.au/news/slides-8.htm

  10. #19
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    You need to download and use the modified script. Here it is again (right click and 'Save As'):

    fadeslideshowratiocrop.js
    Last edited by jscheuer1; 06-09-2013 at 03:11 PM. Reason: uodate script to link back to this thread
    - John
    ________________________

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

  11. #20
    Join Date
    Jun 2013
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    This works fine. Thanks very much for your time. Hopefully your good work will also help someone else.

    Cheers,

    Scriptor

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
  •