Question

i am using this slideshow made with html and javascript:
http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/

the slideshow works good hovewer the large images are not clickable. It has the property but how to make them work so when i click to a picture to send me to the specific link (the link that i write in href=””)

it gets the values from this:

<div class="es-carousel">
  <ul>
    <li><a href="http://www.google.com">
      <img src="images/cityPlaces_images/thumbs/1.jpg" data-large="images/cityPlaces_images/1.jpg" alt="image01"
           data-description="From off a hill whose concave womb reworded" />
    </a></li>

and it generates in this gallery.js:

var $thumb    = $item.find('img'),
    largesrc  = $thumb.data('large'),
    title     = $thumb.data('description');

$('<img/>').load( function() {

    $rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');

    if( title )
        $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );

Answer 1

You could try including the url associated with each thumb as a data-attribute on the element:

 <div class="es-carousel">
  <ul>
    <li><a href="#">
      <img src="images/cityPlaces_images/thumbs/1.jpg" data-large="images/cityPlaces_images/1.jpg" alt="image01"
           data-description="From off a hill whose concave womb reworded"
           data-url="http://google.co.uk"/>
    </a></li>

And update the gallery.js code so that it wraps the img element it creates for the large image when the thumb is clicked with an a tag:

var $thumb    = $item.find('img'),
    largesrc  = $thumb.data('large'),
    title     = $thumb.data('description');
    url       = $thumb.data('url');

$('<img/>').load( function() {

    $rgGallery.find('div.rg-image').empty().append('<a href="' + url + '"><img src="' + largesrc + '"/></a>');

    if( title )
        $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );