Advanced Search

Page 1 of 4 123 ... LastLast
Results 1 to 10 of 36

Thread: Ultimate Fade-in slideshow image resize

  1. #1
    Join Date
    Feb 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow image resize

    1) Script Title: Ultimate Fade-in slideshow (v2.1)

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

    3) Describe problem: Is there a way to change the heigth and width of photos to be inserted into the slideshow, as opposed to just setting the height an width of slideshow? I have larger photos that get cropped by the size that I define for the slideshow, but other photos fit fine. Thanks.

  2. #2
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    Are you asking for a way to specify explicit width/height attributes for each of the images within the slideshow, so they are resized appropriately and fit inside the slideshow area?
    DD Admin

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,154
    Thanks
    260
    Thanked 690 Times in 678 Posts

    Default

    While this is possible, it is always a better idea to resize images and save them at the new size, rather than trying to resize them on the web page. This is because browsers don't render resized images well: they get blocky and loose detail. If you resize them first in your graphics program then upload them, it will look better. It is also possible to do this as a batch operation (even potentially on the server), if you have a lot of images, so that you convert all of them and then the new copies are the right size.
    (It's also possible to resize them dynamically on the server every time they are loaded, but this is a terrible idea because it takes a lot of processing power and would be very slow to load.)

    Of course if you want to keep the images larger so that they can be viewed full size (outside the slideshow), then this is probably not possible and you will have to settle for lower quality images in the slideshow (or, potentially, have two sets of images-- upload/load twice for the different versions).

    I hope this helps you think about how you want to approach the changes.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

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

    Default Image source on another website

    Quote Originally Posted by djr33 View Post
    While this is possible, it is always a better idea to resize images and save them at the new size, rather than trying to resize them on the web page. This is because browsers don't render resized images well: they get blocky and loose detail. If you resize them first in your graphics program then upload them, it will look better. It is also possible to do this as a batch operation (even potentially on the server), if you have a lot of images, so that you convert all of them and then the new copies are the right size.
    (It's also possible to resize them dynamically on the server every time they are loaded, but this is a terrible idea because it takes a lot of processing power and would be very slow to load.)

    Of course if you want to keep the images larger so that they can be viewed full size (outside the slideshow), then this is probably not possible and you will have to settle for lower quality images in the slideshow (or, potentially, have two sets of images-- upload/load twice for the different versions).

    I hope this helps you think about how you want to approach the changes.

    Thank you djr33.

    You said this is possible, but can you let me know how it is done. I want to bring in images from various sources (different web sites) and the images will all be different sizes. I need some way that they can resized automatically before being displayed.

    The slideshow size is 700x400 ie. dimensions: [700, 400]. So, for example, I 'd like to resize an image that is 900x550 down to 700x400.

    I've tried CSS:

    <style>
    img.resize{height:700px;width:auto;}
    </style>

    But I have to place class="resize" somewhere in the imagearray, which doesn't work.

    I'm sure you have a much better method.

    Cheers,

    Scriptor

  5. #5
    Join Date
    Aug 2004
    Posts
    9,862
    Thanks
    3
    Thanked 959 Times in 948 Posts
    Blog Entries
    15

    Default

    Quote Originally Posted by Scriptor View Post
    Thank you djr33.

    I've tried CSS:

    <style>
    img.resize{height:700px;width:auto;}
    </style>

    But I have to place class="resize" somewhere in the imagearray, which doesn't work.


    Scriptor
    Actually you're close. To get the images in the slideshow to scale and fit, either horizontally or vertically, you can do something like the below in CSS:

    Code:
    <style>
    
    #fadeshow1 img{
    width: 250px;
    height: auto;
    }
    
    </style>
    "#fadeshow1" should be the ID of the slideshow DIV, and depending on whether you wish to scale the images to fit horizontally or vertically, set one property to an explicit value, and the other, to auto.

    Cheers,
    DD Admin

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

    Default

    Thank you very much for that DD Admin. It worked perfectly!

    Cheers,

    Scriptor

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

    Default

    Just another quick question:

    If a photo exceeds the dimensions of the gallery frame, the photo seems to be cropped off at the right-hand side and at the bottom.

    Is there anyway to centre the photo so that it is cropped equally on all sides? Or can the top or left-hand side be cropped?

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    That might require a modification to the script which would be easier to work out if we had an example of your page.

    Also I would use different css than ddadmin suggests because there are potentially other images in the #fadeshow1 div. If you use ondemand for the captions you have the hide and show images for that. And since virtually all browsers in use today accept max-width and max-height as style, you would get a better resizing - by width or height, whichever will show the largest possible version of the image after resizing to fit the slideshow:

    Code:
    #fadeshow1 .gallerylayer img {
    max-width: 250px; /* set this to the width of the slideshow */
    max-height: 200px; /* set this to the height of the slideshow */
    }
    That probably will not help the cropping problem you described, that probably has to do with how the script determines to position the image inside the slideshow and is probably thrown off when the image is no longer in its native dimensions. But it might be other css, we would have to see.

    That would be easiest to determine and to fix with an example. Rather than one of us having to make one up, please provide a link to yours:

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

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

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

    Default

    Thanks John,

    Here is a slideshow page: http://designline.com.au/news/slides-1.htm

    Notice that image 3 has the bottom obscured because it's height is larger than the gallery frame. If it was wider, then part of the right-hand side would also be obscured.

    So, just wondering if there is a way to handle the position of the image within the gallery frame. In this example, I'd like to reveal the trees at the bottom and lose part of the sky at the top.

    Thanks,

    Scriptor

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #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>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://designline.com.au/news/js/fadeslideshow.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><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", "", "", ""],
    		["sky-62732_640.jpg", "", "", ""] //<--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>
    </head>
    <body>
    <div id="fadeshow1">
    	&nbsp;</div>
    <p>&nbsp;</p>
    <table width="647" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="201" valign="top"><img src="background-84604_640.jpg" width="200" height="112" align="top"></td>
        <td width="12">&nbsp;</td>
        <td width="200" valign="top"><img src="evening-55067_640.jpg" width="200" height="112" align="top"></td>
        <td width="13">&nbsp;</td>
        <td width="221"><img src="sky-62732_640.jpg" width="200" height="125" align="top"></td>
      </tr>
      <tr>
        <td valign="top"><div align="center">1</div></td>
        <td>&nbsp;</td>
        <td valign="top"><div align="center">2</div></td>
        <td>&nbsp;</td>
        <td><div align="center">3</div></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    </body>
    </html>
    - John
    ________________________

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

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
  •