Jquery link to an an external webpage

Question

I have the following code.

<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() {
var galleryClass = '.gallery';
$(galleryClass+' li img').click(function(){
    var $gallery = $(this).parents(galleryClass);
    $('.main-img',$gallery).attr('src',$(this).attr('src').replace('thumb/', ''))
    .parent().attr('href',$(this).parent().attr('href'));
});
var imgSwap = [];
 $(galleryClass+' li img').each(function(){
    imgUrl = this.src.replace('thumb/', '');
    imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});

}
</script>

The following HTML code.

<div class="gallery">
<img src="gallery/img_1.png" alt="" class="main-img" />
<img src="images/Select-Brands.jpg" width="1010" height="50" />
<ul>
  <li><img src="gallery/thumb/img_1.png" alt="" /></li>
  <li><img src="gallery/thumb/img_2.png" alt="" /></li>
  <li><img src="gallery/thumb/img_3.png" alt="" /></li>
  <li><img src="gallery/thumb/img_4.png" alt="" /></li>
  <li><img src="gallery/thumb/img_5.png" alt="" /></li>
  <li><img src="gallery/thumb/img_6.png" alt="" /></li>
  <li><img src="gallery/thumb/img_7.png" alt="" /></li>
  <li><img src="gallery/thumb/img_8.png" alt="" /></li>
  <li><img src="gallery/thumb/img_9.png" alt="" /></li>

</ul>
</div>

This is the site example. http://flairnecessities.com/AskarBrands/askarbrands.html When you click on each logo it brings up a new image. I would like to have each large image (8 of them) go to 8 separate external websites. They also need to open a separate window.

What is the code that is needed to do this? Thanks!

Answer 1

HTML

<img src="img.png" data-lg="large.png" data-href="http://google.com">
<a class="lg-link"><img class"img-lg"></a>

jQuery

$("[data-lg]").click(function(){
  $(".img-lg").attr("src", $(this).data("lg"));
  $(".lg-link").attr("href", $(this).data("href"));
});

CSS

[data-lg]{
  cursor:pointer;
}

Answer 2

Sorry read the question fast.

<ul>
  <li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_1.png" alt="" /></li>
  <li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_2.png" alt="" /></li>
  <li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_3.png" alt="" /></li>
  <li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_4.png" alt="" /></li>
  <li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_5.png" alt="" /></li>
  <li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_6.png" alt="" /></li>
  <li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_7.png" alt="" /></li>
  <li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_8.png" alt="" /></li>
  <li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_9.png" alt="" /></li>

</ul>

add a rel tag defining the url of each thumbnail (above):

add this wrapper around you main image link:

<a id ="linker" href="#" target="_blank"><img src="http://flairnecessities.com/AskarBrands/gallery/img_1.png" alt="" class="main-img" /></a>

finally add this to your initial click function:

var link = $(this).attr('rel');
$('#linker').attr('href',link);