Results 1 to 6 of 6

Thread: Adding Image x of x under gallery Image

  1. #1
    Join Date
    Apr 2011
    Location
    Brisbane Australia
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Adding Image x of x under gallery Image

    1) Script Title: SimpleGallery

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

    3) Describe problem:

    Great little script guys.

    We are using this to great success, my issue is. I have set panel height to 0px so as to hide the hover panel.

    I have added scripting Underneath the image as such:

    Code:
    <a href="javascript:mygallery.navigate('prev')"><div class="prev-button left back-left" id="go-prevPic"></div></a>
    									
    									<a href="javascript:mygallery.navigate('next')"><div class="next-button left back-left" id="go-nextPic"></div></a>
    So I have the Image gallery.
    Underneath it I have < > for left and right navigation.

    But I would like < Photo 1 of 4 >

    So my question is what would the code be for displaying current image of image array.

    So as image changes it changes to < Photo 2 of 4 >
    Incidentally this needs to sit outside the div,
    Code:
    <div id="simplegallery1"></div>
    with my controls.

    Etc.
    Last edited by 422; 04-26-2011 at 06:36 AM.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    In your settings:
    Code:
    	oninit:function(){ //event that fires when gallery has initialized/ ready to run
    		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
    		document.getElementById(this.setting.wrapperid + "_max_page").innerHTML = this.setting.imagearray.length; //get the length of the image array
    	},
    	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)
    		document.getElementById(this.setting.wrapperid + "_cur_page").innerHTML = i+1; //increase 1 to the current page (because of arrays indexing to 0) and display
    	}
    Then, where you want to put the "x/y" make sure you wrap x in a span with the ID of {wrapperid}_cur_page, and y with the ID of {wrapperid}_max_page. For example:
    Code:
    <span id="simplegallery1_cur_page">0</span> of <span id="simplegallery1_max_page">0</span>
    And the highlighted is what you must change to the wrapperid.

    Good luck
    Last edited by Nile; 04-26-2011 at 06:05 AM.
    Jeremy | jfein.net

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

    422 (04-26-2011)

  4. #3
    Join Date
    Apr 2011
    Location
    Brisbane Australia
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hey thanks NILE.

    But I am wondering where in simplegallery.js that I add the JS code.

  5. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    You don't put it anywhere in simplegallery.js, you put it where you define the new SimpleGallery.

    For example, on http://www.dynamicdrive.com/dynamici...plegallery.htm, in step 1, you'll see the following code.
    Code:
    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    
    <style type="text/css">
    
    /*Make sure your page contains a valid doctype at the top*/
    #simplegallery1{ //CSS for Simple Gallery Example 1
    position: relative; /*keep this intact*/
    visibility: hidden; /*keep this intact*/
    border: 10px solid darkred;
    }
    
    #simplegallery1 .gallerydesctext{ //CSS for description DIV of Example 1 (if defined)
    text-align: left;
    padding: 2px 5px;
    }
    
    </style>
    
    <script type="text/javascript" src="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: "simplegallery1", //ID of main gallery container,
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    	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://i31.tinypic.com/119w28m.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?
    	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>
    If you replace the bold blue text with what I've provided you with, it should work fine.
    Jeremy | jfein.net

  6. The Following User Says Thank You to Nile For This Useful Post:

    422 (04-26-2011)

  7. #5
    Join Date
    Apr 2011
    Location
    Brisbane Australia
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Cheers works perfect.

    Only issue was the trailing ; you initially posted, which is why I couldnt get it working. So the latter portion of that script is now :

    Code:
    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)
    		document.getElementById(this.setting.wrapperid + "_cur_page").innerHTML = i+1;
    	}
    })
    
    </script>

  8. #6
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Yes, I was aware of that. I changed it immediately after I posted my second post, sneakily hoping you wouldn't notice. Nice catch though. I'm glad to see you got it working.

    Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
    1. Go to your first post
    2. Edit your first post
    3. Click "Go Advanced"
    4. In the dropdown next to the title, select "RESOLVED"
    Jeremy | jfein.net

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
  •