jquery鏈接到一個外部網頁

我有以下代碼。jquery鏈接到一個外部網頁

<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>

以下HTML代碼。

<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>

這是網站的例子。 http://flairnecessities.com/AskarBrands/askarbrands.html 當你點擊每個標誌時，它會產生一個新的圖像。我想每個大圖像（其中8個）轉到8個獨立的外部網站。他們還需要打開一個單獨的窗口。

這樣做需要什麼代碼？謝謝！

來源

2013-12-11 user3092524

對不起，很快就讀到了這個問題。

<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>

添加一個rel標籤定義每個縮略圖（上圖）的網址：

添加此包裝你周圍的主圖像鏈接：

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

最後添加到您的初始點擊功能：

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

來源

2013-12-11 19:35:12

感謝您的評論周杰倫。這樣做實際上會使較小的徽標（欄中的徽標）鏈接到外部網頁，而不是上面的較大圖像。我希望當您點擊較小的徽標時，他們會更改上面的較大圖片，當您點擊較大的圖片時，會將您帶到該公司的網站。 – user3092524

已更新對jsfiddle的混淆鏈接感到抱歉：http://jsfiddle.net/B7EX9/ –

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; 
}

來源

2013-12-11 21:18:30 rybo111

jquery鏈接到一個外部網頁

回答

相關問題