PDA

View Full Version : سوال: استفاده از رویداد Onclick یک img


thinkdiff
دوشنبه 26 خرداد 1393, 09:21 صبح
با سلام
من یک اسکریپتی دارم می نویسم که داخلش یک قسمت برای قراردادن یک تعداد عکس کوچک هست و یک قسمت هم 1 دونه عکس بزرگ.
میخوام با هرباز کلیک روی هر کدوم از این عکس های کوچیک :


<img src="model/2.jpg" class="model" /> <img src="model/3.jpg" class="model" />
<img src="model/4.jpg" class="model" />
<img src="model/5.jpg" class="model" />
<img src="model/6.jpg" class="model" />
<img src="model/7.jpg" class="model" />
<img src="model/8.jpg" class="model" />
<img src="model/9.jpg" class="model" />
<img src="model/10.jpg" class="model" />
آدرس سورس عکس بزرگ تبدیل بشه آدرس سورس عکس کوچیکی که روش کلیک شده یعنی این :

<img class="big-img" style="width:auto;height:auto;margin: auto;" />

این طور بگم که آدرس سورس اون عکس بزرگ باید بشه آدرس سورس عکس کوچیکی که روش کلیک شده.هر عکسی از اون کوچیکا که کلیک شد اون عکس بزرگه باید بشه همون عکس کوچیک اما سایز بزرگترش.
این رو هم بگم که این عکسا قرار داینامیک عوض بشن و تعدادش معلوم نیست.اگر نیازه آرایه یا مثلا اسم کلاس به همراه عدد مثلا model1 , model2 , model3 هم باید کنترل شده باشه.

120223

ممنون میشم یک روشی یا کدی بهم بگین.
qartalonline
دوشنبه 26 خرداد 1393, 09:58 صبح
عکس های اصلی رو برای اندازه بزرگتر در نظر بگیرید سپس به عکسهایی که میخواین کوچک باشن ارتفاع و عرض کوچک بدید مثلا 100*100 حالا با کلیک بر روی عکسها خاصیت src عکس بزرگ رو تغییر بدید.

کدش هم بصورت زیر میشه.

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function (){
$('img.model').click(function (){
$('img.big-img').attr('src', $(this).attr('src'));
});
});
</script>
</head>
<body>
<div>
<img alt="" src="model/2.jpg" class="model" height="100" width="80"/>
<img alt="" src="model/3.jpg" class="model" height="100" width="80"/>
<img alt="" src="model/4.jpg" class="model" height="100" width="80"/>
<img alt="" src="model/5.jpg" class="model" height="100" width="80"/>
<img alt="" src="model/6.jpg" class="model" height="100" width="80"/>
<img alt="" src="model/7.jpg" class="model" height="100" width="80"/>
<img alt="" src="model/8.jpg" class="model" height="100" width="80"/>
<img alt="" src="model/9.jpg" class="model" height="100" width="80"/>
<img alt="" src="model/10.jpg" class="model" height="100" width="80"/>
</div>
<div>
<img alt="" src="model/2.jpg" class="big-img" height="300" width="250"/>
</div>
</body>
</html>
thinkdiff
دوشنبه 26 خرداد 1393, 18:23 عصر
خیلی لطف کردی.دقیقا مشکلم حل شد.