Results 1 to 4 of 4

Thread: Center Image In Ultimate Slideshow 2.4

  1. #1
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Center Image In Ultimate Slideshow 2.4

    Right now the ultimate shideshow 2.4 div shows the image aligned top-left. I want it aligned center-middle and trim off the sides, top and bottom as needed. Is that possible?

    .css({position:'absolute', left:0, top:-100, width:'100%', height:'100%', background:'black'})

    If i adjust the top and left in this line of the js i can change where the image is placed but then it messes up the other images. I just want all images centered in the div.

  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

    Please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

    Warning: Please include a link to the DD script(s) in question in your post. See this post for more information.


    Unless you're trying for something unusual, the slideshow centers the images automatically as long as you set up the dimensions correctly in the on page call and have no centering that interferes with the slideshow layout, ex:

    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.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    The instructions there are a little too minimal. The width (the first number) should be the width of the widest image. The height (the second number) should be the height of the tallest image. These might not necessarily be the same image. Also you can set it wider or taller, that's up to you, but they must be at least as large as indicated.

    If you want more help:

    Please post a link to a 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

  3. #3
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the quick reply! I dont know how wide or high these images will be. They are loading via a cms system / sql. My user is updating these images all the time and there's no way to adjust the parameters for every new image.

    The slideshow is in the header of this site: http://www.debbiemelvin.com/index2.php

  4. #4
    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'd suggest looking into cropping or resizing them on the server side.

    Another thing you could try is having the browser resize them.

    First though, you have a syntax error that breaks the script in IE 8 and less:

    Code:
    <script type="text/javascript">
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [696, 288], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["/admin/uploads/Wrencrest_182.jpg", "http://www.debbiemelvinsearch.coldwellbankerbarnes.com/default.cfm/page/forsale/cat/display/mlsid/mls_midtennessee/propertytype/residential/ml_number/1273757/referer/Search%20Results.htm", "listings", "<b>1221 Cooks Rd</b><br>$309,000"],
        	["/admin/uploads/26_Beacon_Hill_011.jpg", "", "listings", "<b>2150 FM Rd 79</b><br>$91,000"],
        	],
    	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
    	persist: true, //remember last viewed slide and recall within same session?
    	fadeduration: 1000, //transition duration (milliseconds)
    	descreveal: "peekaboo",
    	togglerid: ""
    })
    </script>
    Other browsers error correct for this. See the red comma? Remove it.

    Now, about having the browser resize the images. Put this in the stylesheet:

    Code:
    #fadeshow1 .gallerylayer img {
    	max-width: 696px;
    	max-height: 288px;
    }
    Last edited by jscheuer1; 05-27-2011 at 08:06 AM. Reason: Add: max-height
    - 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
  •