Results 1 to 6 of 6

Thread: HELP - Simple Controls Gallery and text inside the navigation panel

  1. #1
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question HELP - Simple Controls Gallery and text inside the navigation panel

    1) Script Title: Simple Controls Gallery

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

    3) Describe problem:

    I want to show a individual text on each slide inside the navigation. How can i do that

    How can i replace the slide-number @ the navpanel with an individual text for each slide?

    Thanks so much
    dynamicbeginner
    Last edited by dynamicbeginner; 01-28-2009 at 11:44 AM.

  2. #2
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Isnīt there a chance to show text like here
    http://www.dynamicdrive.com/dynamici...suppliment.htm

    "oninit()" and "onslide" event handlers: Running your own code after each slide change

    not outside but inside the navigation panel

    I need urgend help

    Thanks so much

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Well, it basically comes down to modifying the last example on the supplementary page so the description is shown within the nav panel itself. The only modification you really need to make is to add an additional "text container" DIV inside the nav panel within simplegallery.js. Do the following:

    1) Use the attached modified .js file.

    2) Then, inside your invocation code on your page, define an array of text descriptions, and use the onslide() event handler to display them inside the nav panel's text container:

    Code:
    <script type="text/javascript">
    
    var vacationtext=[
    "The river looks beautiful at sunset.",
    "A nice day to enjoy the city.",
    "That's a lot of cheese I must say.",
    "Most buildings in the city are just 4 or 5 stories tall."
    ]
    
    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"],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", ""],
    		["http://i30.tinypic.com/531q3n.jpg", "", ""],
    		["http://i31.tinypic.com/119w28m.jpg", "", ""]
    	],
    	autoplay: true,
    	persist: false,
    	pause: 2500, //pause between slides (milliseconds)
    	fadeduration: 500, //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
    		$('#gallerytext').html(vacationtext[i])
    	}
    })
    
    </script>
    DD Admin

  4. #4
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default



    Great, thank you so much !!!

    The script is incredible

    Many thanks again
    Last edited by dynamicbeginner; 01-29-2009 at 10:31 AM.

  5. #5
    Join Date
    Jan 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    One last question

    How can i format the text inside the navigation panel?

    Like the padding, margin, distance left/right inside the panel ... ?

    Thanks

  6. #6
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Well, the DIV that contains the description carries an ID of "#gallerytext", so just style that in your CSS, ie:

    Code:
    #gallerytext{
    padding: 5px;
    font-size: 110%;
    }
    DD Admin

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
  •