Page 3 of 4 FirstFirst 1234 LastLast
Results 21 to 30 of 36

Thread: Ultimate Fade-in slideshow image resize

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

    Default

    Just one more slight problem John. On reloading the page, it comes up with an undefined image for a few seconds and then the slideshow begins.

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

  2. #22
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    Using a text only editor like NotePad, in the fadeslideshowratiocrop.js file, near the beginning, find the configuration area:

    Code:
    var fadeSlideShow_descpanel={
    	controls: [['x.png',7,7], ['restore.png',10,11], ['http://******/****/ufade/loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
    	fontStyle: 'normal 11px Verdana', //font style for text descriptions
    	slidespeed: 200 //speed of description panel animation (in millisec)
    }
    Change the highlighted to point to your own loading image, like make that:

    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
    	slidespeed: 200 //speed of description panel animation (in millisec)
    }
    You should have downloaded the loading image from the demo page. If not, you can use this one (right click and 'Save As'):

    Name:  loading.gif
Views: 92
Size:  1.9 KB

    Put it in the same folder as your page with the slideshow on it.
    Last edited by jscheuer1; 06-09-2013 at 05:39 PM. Reason: spelling, obscure path
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    JNSoendergaard (08-01-2013)

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

    Default

    Brilliant! Got it now. Many thanks again.

  5. #24
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Hi John

    I have just started using your script and it works perfectly, except when the image is wider than the slideshow. It scales the image as it should, but it doesn't crop it in the center but istead it cuts of the left side.
    Can you help fix this?

  6. #25
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    First, are you using the updated script (fadeslideshowratiocrop.js)? And have you added the directive , {crop: 'center'} after that slide's entry in the imagearray, example from the user's before you demo:

    Code:
    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", "", "", ""],
    		["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: ""
    })
    Also as shown in the comment section of the updated script:

    Code:
    //June 9th '13 Custom modification to specify cropping of larger images 'center' or 'topleft', defaults to bottom right crop,
    	//usage example (in imagearray in the on page new fadeSlideShow call);
    
    /* 	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!
    	],
     */
    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-01-2013 at 04:58 PM. Reason: detail
    - John
    ________________________

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

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

    JNSoendergaard (08-01-2013)

  8. #26
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the quick response

    Yes, I have done all the things listed above, and it works for images heigher than the slideshow, but not for images wider than the slideshow.

    here are the code that i am using (it is a bit modified to fit my purpose):

    Code:
    <style type="text/css">
    #reklame3 .gallerylayer img {
    display: block;
    }
    .reklame3tall {
    width: 100%; /* set this to 100% */
    height: auto; /* set this to auto */
    }
    .reklame3wide {
    width: auto; /* set this to auto */
    height: 100%; /* set this to 100% */
    }
    .reklame3even {
    width: 100%; /* set this to 100% */
    height: 100%; /* set this to 100% */
    }
    </style>
    Code:
    <script type="text/javascript" src="js/fadeslideshowratiocrop.js">
    Code:
    var reklame3=new fadeSlideShow({
    	wrapperid: "reklame3", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 275], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	
    	<?php
    	$imgdir = 'galleri/photos/Hoejre reklame/'; //Pick your folder
    	$allowed_types = array('png','jpg','jpeg','gif'); //Allowed types of files
    	$dimg = opendir($imgdir);//Open directory
    		
    	?>
    	imagearray: [
    	<?php
    	$i = '0';
    	while($imgfile = readdir($dimg))
    	{
    	  if( in_array(strtolower(substr($imgfile,-3)),$allowed_types) OR
    		  in_array(strtolower(substr($imgfile,-4)),$allowed_types) )
    	/*If the file is an image add it to the array*/
    	  {
    		  $a_img[] = $imgfile;
    		  
    		  if($i >= 1)
    		  {
    			?>  
    			, 
    			<?php 
    		  }
    		  ?>
    		  ["galleri/photos/Hoejre reklame/<?php echo $imgfile; ?>"], {crop: 'center'}
    		  <?php
    		  $i++;
    	  }
    	}
    
    	?>
    	],
    	displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false, randomize:true},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 1000, //transition duration (milliseconds)
    	descreveal: "none",
    	togglerid: ""
    })

  9. #27
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    I use the code on this site: http://www.vejlenystenhuggeri.dk/ in the box in the right side of the page, the one under the facebook-box.

    I have added these two photos to the slideshow (among others) so you get an idea of what i mean:
    http://www.vejlenystenhuggeri.dk/use...age/profil.jpg
    http://www.vejlenystenhuggeri.dk/gra...alleri/005.jpg
    Last edited by JNSoendergaard; 08-01-2013 at 06:15 PM.

  10. #28
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    Seems fine here. On /grafik/topgalleri/005.jpg it's centered. This script only crops the images, it doesn't resize them unless both their width and their height are too great to fit in the slideshow. If they're both too big, the script chooses the one that's proportionally less out of range and conforms it to the corresponding dimension of the slideshow. Once one of these dimensions is changed to fit, the other is scaled to it and cropped.

    Now, the image isn't actually cropped, rather only that part of it that fits in the slideshow is shown. With {crop: 'center'}, that's the center, which is what I see on /grafik/topgalleri/005.jpg

    Oh, and you are missing the loading image, see my previous post on that.
    - John
    ________________________

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

  11. #29
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Hi again John

    Strange, when I look at the slideshow i see the two red hearts which is part of the right side of the picture, I would expect to see the middle part?
    Thanks for pointing the loading image out.

  12. #30
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    OK, I see (click to enlarge):

    Click image for larger version. 

Name:	hearts.jpg 
Views:	48 
Size:	18.8 KB 
ID:	5167

    What browser are you using?

    Oh, and looking at it, I see that, since it's too wide to fit, but not tall enough to fill the slideshow vertically, the script is enlarging it slightly to fit the height. But it is centered.

    Hmm, it's centered in IE, Opera, and Firefox, but right aligned in Chrome. Not sure why it's like that in Chrome. I have to run right now. When I have more time I'll look into it.
    - John
    ________________________

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

  13. The Following User Says Thank You to jscheuer1 For This Useful Post:

    JNSoendergaard (08-01-2013)

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
  •