0

画像オーバーで機能を起動したい。ライトボックスで JQueryThumbGallery を使用しており、画像 ID を取得したい

私のコードは

<div class='thumbHolder' **data-id="MY-ID"** data-title="<?php echo '<span class=\'io_home\'>'.$row['io'].'</span><br /> '.$row['first_name'].' '.$row['last_name'].'<br/><span class=\'voti_home\'>'.$row['tot_voti'].' VOTI</span>'; ?>">
  <a rel="prettyPhoto[ajax]" href="index.php/image/view_image?ajax=true&width=700px&height=450px&id=<?php echo $row['id']; ?>" >
  <img class="thumb_hidden" src="<?php echo base_url().'upload/concorso1/thumb/'.$row['url']; ?>" width="151" height="120" alt="<?php echo $row['first_name'].' '.$row['last_name']; ?>" />
                                </a>

                            </div>

そしてjquery関数は

        function overThumb(i,j){

        //function called when mouse over thumb holder (plus returned item number: i = first level, j = second level)
        console.log('overThumb: ', i,' , ', j);
    }

オンにした画像から ID を取得する必要があります (overThumb 関数)。data-id-i と data-id-j を設定しようとしましたが、どのように使用すればよいかわかりません。手伝って頂けますか？

スクリプトへのリンク

http://www.interactivepixel.net/ccThumbGallery/index_grid_horizo​​ntal_100percent_buttons.html

ありがとうFC

4

1 に答える 1

0

PHP コードを変更して、img タグのマークアップを次のようにレンダリングします (HTML のみ!関数は接続されていません)。

<img class="thumb_hidden" src="Somepath/someimage.jpg" 
               data-myAttr="my custom val" id="someUniqueID" alt="some text" />

今すぐ邪魔にならないJavaScriptを使用してください

<script type="text/javascript">
 $(function(){
   $("img.thumb_hidden").mouseover(function() {
       var ourImg=$(this);
       var urlOfImage=ourImg.attr("href");
       var idOfImage=ourImg.attr("id");
       //let's get the HTML5 data attribute as well
       var myCustomVal=ourImg.data("myAttr");
       //Now use these to make ajax call as necessary
   });    
 });
</script>
于 2012-10-05T21:55:30.440 に答える