單擊鏈接將相關圖像加載到容器中

我有一些鏈接，當您單擊它們時，我需要它們將圖像加載到容器中，並且當您單擊關閉鏈接時，它會再次隱藏它。單擊鏈接將相關圖像加載到容器中

我這裏有它的一個例子，但不能確定如何將圖片應用與鏈接的div，如果這是有道理的：

我想我需要沿此線的東西.. ..

<a class="click" href= "#" src="image/location">Click here to fadeIn the image in a container</a>

我將有很多圖像的鏈接，容器將保持不變。

什麼是最好的和有效的方式來啓動這個？

謝謝！

來源

2013-07-21 user2212564

$(function() { 
    $("a.click").click(function (event) { 
     //hide panel in case it's already visible because of a previously loaded image 
     $("#hiddenPanel").fadeOut(0); 
     //disable default link click event so page does not change if link has a href 
     event.preventDefault(); 
     //set links src to the src of image in the hidden panel 
     $("#hiddenPanel img").attr("src", $(this).attr("src")); 
     $("#hiddenPanel").fadeIn(1000); 
    }); 
    $("#closeButton").click(function() { 
     $("#hiddenPanel").fadeOut(1000); 
    }); 
});

FIDDLE

你可能想淡出影像慢慢淡出，而不是（0）的，如果它是可見的，並加載新的淡出後完成。

來源

2013-07-21 17:22:18 Desu

謝謝！我assime tht event.preventDefault（）;是停止刷新頁面，隱藏隱藏的容器，然後點擊與類a的鏈接時，帶有被單擊的src屬性的圖像淡入。 – user2212564

明天建立這個正確 - 將讓你知道我如何得到！ – user2212564

是的，如果你不阻止默認的點擊事件，它會嘗試加載鏈接，如果鏈接有一個實際的href它將導航到該頁面。 – Desu

HTML這裏

<div class="wrapper"> 
<a href="image.png">click me to show</a> 

<div style="display: none;"> 
    <img src="noimg.png" /> 
    <a href="#"></a> 
</div> 
</div>

和jQuery這裏

$('.wrapper > a').click(function(event) { 
var thisSrc = $(this).attr('href'); 
var thisImg = $(this).next().children('img'); 

thisImg.attr('src', thisSrc); 
$(this).next().show(); 
event.preventDefault(); 
}); 

$('.wrapper > div > a').click(function() { 
$(this).parent().hide(); 
});

我認爲這是簡單的方法來做到這一點...你也可以輸入功能，要做到這一點，比上運行該功能點擊事件...

和你可以風格標記wothout元素風格:)）

來源

2013-07-21 17:34:17

單擊鏈接將相關圖像加載到容器中

回答

相關問題