Results 1 to 2 of 2

Thread: Ultimate Fade-in slideshow Picture Positioning?

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

    Default Ultimate Fade-in slideshow Picture Positioning?

    1) Script Title:
    Ultimate Fade-in slideshow

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

    3) Describe problem:
    I love this script, but I have several photos that are not the same size, and rather then crop all of them myself, I'd love it if the slideshow automatically centered the image within the DIV area, as most of my images I just want the middle to be displayed anyways. Right now it's only showing from the top edge of the graphic down to the height I specified for the slide show. Is there a way to modify the script to allow for image centering?

    Thanks!

    -JManPHX

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not the author of this script. And I'm not personally inclined at the moment to help you directly with your request.

    However, it might be helpful for you to realize, in case you didn't know, that the script already does that, sort of.

    If you set the width to the width of the widest image, and set the height to the height of the tallest image, it will center all the images. Set the width and height here:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.c . . .
    With that knowledge, you should be able to set up your own 'crop box' around the slide show. Say your show's wrapperid is fadeshow1 and its dimensions accordingly, to show all of each image centered as described above would work out to 600x600. Then you could have like:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [600, 600], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.c . . .
    and:

    HTML Code:
    <div style="width: 300px; height: 300px; overflow: hidden;">
    <div style="width: 600px; height: 600px; margin: -150px 0 0 -150px;">
    <div id="fadeshow1"></div>
    </div>
    </div>
    Last edited by jscheuer1; 06-22-2010 at 08:52 AM. Reason: add info
    - 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
  •