Advanced Search

Results 1 to 4 of 4

Thread: Simple Controls Gallery

  1. #1
    Join Date
    Dec 2005
    Posts
    133
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default Simple Controls Gallery

    1) Script Title: :: Simple Controls Gallery

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

    3) Describe problem:
    I am using the simple gallery (with the pictures of Amsterdam).
    Is it possible to add a function that when I click on the image it goes to the next image and not to an external link?

  2. #2
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Find in your simplegallery.js the following:
    Code:
    	getSlideHTML:function(imgelement){
    		var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
    		layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />'
    		layerHTML+=(imgelement[1])? '</a>' : ''
    		return layerHTML //return HTML for this layer
    	}
    And replace the highlighted with javascript:mygallery.navigate('next') I'm not 100% positive this will work
    Jeremy | jfein.net

  3. #3
    Join Date
    Dec 2005
    Posts
    133
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Default

    no it doesnt work unfortunately
    any other suggestion?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,701
    Thanks
    43
    Thanked 3,133 Times in 3,097 Posts
    Blog Entries
    12

    Default

    No need to edit the script. That will make it unusable for other galleries where you might not want this effect. I'm assuming you're using this or something like it:

    Code:
    <script type="text/javascript">
    
    var mygallery=new simpleGallery({
    wrapperid: "simplegallery", //ID of main gallery container,
    dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: [
    ["amster1.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", ""],
    ["amster2.jpg", "http://en.wikipedia.org/wiki/Winter", "", ""],
    ["amster3.jpg", "", "", ""],
    ["amster4.jpg", "", "", ""]
    ],
    autoplay: [false, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: true,
    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)
    }
    })
    
    </script>
    Add the highlighted sections:

    Code:
    <script type="text/javascript">
    
    var mygallery=new simpleGallery({
    wrapperid: "simplegallery", //ID of main gallery container,
    dimensions: [400, 265], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
    imagearray: [
    ["amster1.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", ""],
    ["amster2.jpg", "http://en.wikipedia.org/wiki/Winter", "", ""],
    ["amster3.jpg", "", "", ""],
    ["amster4.jpg", "", "", ""]
    ],
    autoplay: [false, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    persist: true,
    fadeduration: 1000, //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"))
    var sg = this;
    sg.setting.$gallerylayers.css({cursor: 'pointer'}).attr('title', 'Next').click(function(e){
    e.preventDefault();
    sg.navigate('next');
    });
    },
    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)
    }
    })
    
    </script>
    <style type="text/css">
    .gallerylayer * {
    	outline-style: none;
    }
    </style>
    This will work for any gallery, transforming all images in it into 'Next' buttons regardless of whether or not they're linked in the imagearray. It's better not to link them there because if they are linked there the user will see the link in the status bar but not be able to navigate to it by clicking.

    If you want no "Next" tool tip on hovering the images, remove:

    .attr('title', 'Next')

    from the above.

    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

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    emanuelle (01-17-2011)

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
  •