i want to launch a function on image over. I use JQueryThumbGallery with lightbox and i want to retrive the image id
My code is
<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>
and the jquery function is
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);
}
I need to retrieve ID from the image on which I turn on (overThumb function). I have tried to set data-id-i and data-id-j but I haven’t understud how I should use them. Can you help me?
link to script
http://www.interactivepixel.net/ccThumbGallery/index_grid_horizontal_100percent_buttons.html
Thanks fc
Change your PHP code to render the img tag markup like this (only HTML !no function hooked up)
<img class="thumb_hidden" src="Somepath/someimage.jpg"
data-myAttr="my custom val" id="someUniqueID" alt="some text" />
Now use some unobutrusive 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>