ホバー時にふわっと透明度を変えるjQueryをGeeklogに実装する

以下のサイトを参考に、GeeklogのjQueryプラグインのlightboxに実装します。

ホバー時にふわっと透明度を変えるjQueryのコード

http://memocarilog.info/jquery/3924

 

例）　https://www.geeklog.jp/geeklog222/public_html/databox/category.php/code/site

 [lightbox:/images/library/Image/image1.jpg] [lightbox:/images/library/Image/image2.jpg] [lightbox:/images/library/Image/image3.jpg]

 

１．foter {plugin_footercode}の下に、以下のコードを追加。

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$(".hover_img").hover(function(){

     $(this).fadeTo(300,0.5);

    },

    function(){

    $(this).fadeTo(300,1.0);

    });

});

</script>

 

 

２．jQueryプラグインをインストールして、コンフィギュレーションパネルでlightboxを有効にする。

 

３．functions.phpをhackして、imgタグにclass hover_imgを追加します。

270行周辺

 

from:

<img class="lightbox" 

 

to:
<img class="lightbox hover_img"