放大鏡上的圖像懸停在wordpress

我得到this畫廊。當您懸停圖像時，我想應用放大鏡（或其他東西），以便用戶輕鬆看到圖像可以變大。我想要的效果與this one類似。放大鏡上的圖像懸停在wordpress

我一直在尋找wordpress中的不同文件，我的問題是，我只是不能在鏈接中添加 <span class="roll" ></span>與圖像。

如果有人知道如何做到這一點，請告訴。 :-)

謝謝。

我在CSS把這個footer.php

<script> 
//$('a.image:link').prepend('<span class="roll"></span>'); 
$('.gallery-icon a:link').each(function() { 
    $(this).prepend('<span class="roll"></span>'); 
    // OR 
    //$(this).wrapInner('<span class="roll"></span>'); 
}); 
</script> 

<script> 
$(function() { 
// OPACITY OF BUTTON SET TO 0% 
$(".roll").css("opacity","0"); 

// ON MOUSE OVER 
$(".roll").hover(function() { 

// SET OPACITY TO 70% 
$(this).stop().animate({ 
opacity: .7 
}, "slow"); 
}, 

// ON MOUSE OUT 
function() { 

// SET OPACITY BACK TO 50% 
$(this).stop().animate({ 
opacity: 1 
}, "slow"); 
}); 
}); 
</script>

這。

span.roll { 
    background:url(images/zoom.png) center center no-repeat #000; 
    height: 120px; 
    position: absolute; 
    width: 150px; 
    z-index: 7000; 
    -webkit-box-shadow: 0px 0px 4px #ff0066; 
    -moz-box-shadow: 0px 0px 4px #ff0066; 
    box-shadow: 0px 0px 4px #ff0066; 
}

當我看着從我webdeveloper代碼它看起來像這樣： image-code

這就像WordPress的重寫我的所有的CSS等。

來源

2012-02-28 Sabine Quardon

如何使用jQuery追加（前置）跨度到您的鏈接？沒有看到你的代碼，繼承人小傳情

$('.IMAGELINK').each(function() { 
    $(this).prepend('<span class="roll"></span>'); 
    // OR 
    $(this).wrapInner('<span class="roll"></span>'); 
});

禁用了javascript變焦功能將被禁用所以這個跨度would'nt被添加到代碼。

來源

2012-02-28 15:18:51 Marty

我只能把它放到img-tags裏面span class：s – 2012-02-28 16:31:56

把它放在應該放的地方，現在我只是想知道爲什麼它不會在css上做出反應.. 雖然謝謝！ :-) – 2012-02-28 16:38:40

你將不得不張貼你的代碼，以便讓我們更好地瞭解它如何坐在你的頁面上，這樣我/我們可以更好地決定如何解決問題，M ... ahh nice 1剛剛看到你的更新，就在現在，......發佈你的代碼..：）只需編輯你的原始問題以包含代碼塊。 – Marty 2012-02-28 16:39:13

放大鏡上的圖像懸停在wordpress

回答

相關問題