Results 1 to 8 of 8

Thread: how to centerly position image in Simple Controls Gallery v1.4

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

    Default how to centerly position image in Simple Controls Gallery v1.4

    1) Script Title: Simple Controls Gallery v1.4

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

    3) Describe problem: i want to put pictures that are different in sizes.some of the pictures are smaller than the dimensions of the slideshow gallery (refer to the script below).the smaller picture comes out on the top left and it's not a nice to see (refer to image below).how do i make all the pictures regardless of size positioned horizontally and vertically center on the slideshow?

    Thank You


    dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly


  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Use this modified version of the script (right click and 'Save As'):

    simplegallery_center_ims.js

    Set the dimensions of the gallery to the width of the widest image, and the height of the tallest image. There is a new optional background property for setting the background color of the gallery (defaults to 'black', any valid css value for background, including those for url, position, etc. may be used), example gallery:

    Code:
    var mygallery2=new simpleGallery({
    	wrapperid: "simplegallery2", //ID of main gallery container,
    	dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the width of the widest image, and the height of the tallest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "http://en.wikipedia.org/wiki/Swimming_pool", "_new", "There's nothing like a nice swim in the Summer."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "", ""],
    		["http://i30.tinypic.com/531q3n.jpg", "", "", "Eat your fruits, it's good for you!"],
    		["http://www.dynamicdrive.com/dynamicindex4/amster1.jpg", "http://en.wikipedia.org/wiki/Amsterdam", "_new"],
    		["http://www.dynamicdrive.com/dynamicindex4/amster2.jpg", "http://en.wikipedia.org/wiki/Amsterdam", ""],
    		["http://www.dynamicdrive.com/dynamicindex4/amster3.jpg", "", ""],
    		["http://www.dynamicdrive.com/dynamicindex4/amster4.jpg", "", ""]
    	],
    	autoplay: [false, 3000],
    	persist: true,
    	background: 'white', //background style for gallery
    	fadeduration: 1000, //transition duration (milliseconds)
    	oninit:function(){ //event that fires when gallery has initialized/ ready to run
    
    	},
    	onslide:function(curslide, i){ //event that fires after each slide is shown
    		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
    		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    	}
    })
    Last edited by jscheuer1; 09-26-2013 at 08:27 PM. Reason: add detail in explanation
    - John
    ________________________

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

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

    Default

    it works! thank you very much.i really appreciate your response.have a very nice day.god bless you
    Last edited by orggilak; 05-18-2011 at 01:22 PM.

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

    Default

    update:

    in your new simplegallery_center_ims.js I realised on line 67 it should be:

    Code:
    .css({position:'absolute', left:0,top:0, width: setting.dimensions[0]/2, height: setting.dimensions[1]/2, background: setting.background || 'black'})
    instead of

    Code:
    .css({position:'absolute', left:0,top:0, width: setting.dimensions[0], height: setting.dimensions[1], background: setting.background || 'black'})

    then the picture will be on the center horizontally and vertically

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    I don't think so. I tested it and it works as I have it. Perhaps there's something else going on with your styles, layout, and/or how you've set the dimensions for the gallery in the on page call. In any case, what you've done will not affect the centering if everything else is OK. The change you've made would result in bleed through of larger images to the right and bottom of smaller images. Perhaps you're viewing cached copies, once you catch up to your current version you should notice the bleed through. Or, as I say, other things about the page make that change work for you.

    But, as long as it's working for you, that's fine by me.

    Here's a demo of it using my code:

    http://home.comcast.net/~jscheuer1/s...center_ims.htm
    - John
    ________________________

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

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

    Default Same problem of center pictures

    I want to put pictures that are different in sizes in center of the gallery.

    This is my code:

    <style type="text/css">

    /*Make sure your page contains a valid doctype at the top*/
    #simplegallery2{ //CSS for Simple Gallery Example 1
    position: relative ; /*keep this intact*/
    visibility: hidden; /*keep this intact*/
    border: 10px solid darkred;
    }

    #simplegallery2 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
    text-align: left;
    padding: 2px 5px;
    }

    #simplegallery2 .image {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: auto;
    right:auto;
    }


    </style>

    <script type="text/javascript" src="js/simplegallery.js">

    /***********************************************
    * Simple Controls Gallery- (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 simpleGallery({
    wrapperid: "simplegallery2", //ID of main gallery container,
    dimensions: [725, 550], //dimensions: [725, 550]original 250/180 width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: [
    ["images/fotogalerij septon/03okt 147.jpg", "center", "_new", "geautomatiseerde douches"],
    ["images/fotogalerij septon/03okt 150.jpg", "", "", ""],["images/fotogalerij septon/03okt 157.jpg", "", "", ""],[ "images/fotogalerij septon/03okt 158.jpg" , "", "", ""],["images/fotogalerij septon/08juni 011.jpg", "", "", ""],],
    autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: false, //remember last viewed slide and recall within same session?
    background: 'white', //background style for gallery
    fadeduration: 500, //transition duration (milliseconds)
    oninit:function(){ //event that fires when gallery has initialized/ ready to run
    //Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    },
    onslide:function(curslide, i){ //event that fires after each slide is shown
    //Keyword "this": references current gallery instance
    //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
    //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
    }
    })

    </script>

    <div id="simplegallery2"></div>

  7. #7
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,162
    Thanks
    263
    Thanked 690 Times in 678 Posts

    Default

    If you have a new question please start a new thread. I'm closing this one.
    (If you'd like, you can link back to this one.)
    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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    I just noticed that the link to the updated version of the script was lost. I've just replaced it. See (post #2 in this thread):

    http://www.dynamicdrive.com/forums/s...216#post253216

    to get it.

    But as Daniel said, this is an old thread. If you have more questions, please start a new thread for them
    - 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
  •