I want to enlarge clicked image and I am getting images by AJAX.
I tried to use class img-wrap
in JavaScript:
$('.img-wrap').css('transform','scale(40,20)');
but this enlarges all the images and I have about 20 images on my page.
AJAX page:
<?php
sleep(1);
$c=mysql_connect("localhost", "abc", "xyz");
mysql_select_db("root");
$sql = "select * from image2 ";
$qc = mysql_query( $sql ) or die( mysql_error() );
$count = 0;
while( $ans = mysql_fetch_array( $qc ) ) {
$title=ucwords($ans['EVENT']);
print "
<div class='img-wrap' id='$count' onclick='big(this.id)'>
<img id='display_img' src='slider_images/$ans[img]' draggable='false'>
</div>";
$count++;
}
?>
JAVASCRIPT:
function big( z ) {
$(this.id).css('transform','scale(40,20)');
$(this.id).css('-webkit-transform','scale(40,20)');
$(this.id).css('-moz-transform','scale(40,20)');
$(this.id).css('-ms-transform','scale(40,20)');
}
$('#img-wrap')
selects an id called img-wrap
$('.img-wrap')
selects the class
I would say:
function big(z) {
$(z).find('img').({
'transform','scale(40,20)',
'-webkit-transform','scale(40,20)',
'-moz-transform','scale(40,20)',
'-ms-transform','scale(40,20)'
});
}
(You can put more than one CSS property in the CSS function by making it an object ({}). Also, your images all have the same ID which is invalid. Every ID needs to be unique.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.