نمایش کامل عکس با کلیک بر روی عکس کوچک توسط جی کوئری

[M.Javad 684]

سلام.من دو قسمت در طراحیم دارم یه قسمت که عکس هارو به صورت کوچیک نشون میده و یه قسمت به صورت بزرگ به طوریکه وقتی روی هر عکس کوچیک بخوام کلیک کنم کل عکس رو به صورت بزرگ در کادر سمت راستش نمایش بده

<!--img-->
	    <div class="img"><img src="" width="350" height="435" /></div>
	    <!--cover-->
	    <div class="poster">
	    <ul>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
   <li><a href=""><img src="" width="110" height="150" /></a></li>
  </ul>
	    </div>

در کلاس img قراره عکس بزرگ نمایش داده بشه

حالا سوالی که من دارم اولا چطور میشه مقدار یا ادرس یه عکس رو توسط جی کوئری بگیرم؟

$img=$(.poster li img).attr('src');

آیا این کدی که نوشتم آدرس داخل عکس رو برمیگردونه؟!

و دوم اینکه چطوری این عکس رو به کلاس img بدم که در اون کادر بزرگ نمایش بده؟!درواقع چطوری این آدرس عکس رو به آدرس عکس در کلاس img بدم؟!

ممنون میشم راهنمایی کنید

[M.Javad 684]

این کد رو نوشتم فقط برای کلیک روی عکس اول کار میکنه.یعنی وقتی روی عکس اول کلیک میکنم عکس بزرگشو نشون میده ولی دیگه روی عکسای دیگه هرچی کلیک میکنم چیزی نشون نمیده :|

درواقع روی هرعکسی کلیک میکنم فقط همون عکس اول رو نشون میده :{

$(function() {
var img="";
$('.poster ul>li img').click(function(e){
e.preventDefault();
var img= $('.poster ul>li img').attr('src');
$('.img img').attr('src',img); 
});
});

ویرایش شده آبان 93 توسط M.Javad

[مهدی 1668]

سلام

دو راه به نظرم میرسه

اول این‌که عکس‌های کوچیک رو در حالی که بزرگ هستند کوچیک نمایش بدید با یک کلاس خاص

که با هر کلیک بر روی اون‌ها اون کلاس حذف بشه و عکس بزرگ نمایش داده بشه

یه راه هم هست که می‌بایست تست کنید

این آموزش رو ببینید

فقط به جای این‌که به صورت لایت‌باکس عکس‌هاتون رو نشون بدید مثلا سمت راست صفحه اون رو نشون میدید

[themento 348]

اگه درست متوجه شده باشم اینطوری میشه:

<li><a href="<?php if (has_post_thumbnail()) {
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
echo $thumb[0];
} ?>"><img src="<?=wp_get_attachment_url( get_post_thumbnail_id() ); ?>" width="110" height="150" /></a></li>

[M.Javad 684]

اگه درست متوجه شده باشم اینطوری میشه:

<li><a href="<?php if (has_post_thumbnail()) {
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
echo $thumb[0];
} ?>"><img src="<?=wp_get_attachment_url( get_post_thumbnail_id() ); ?>" width="110" height="150" /></a></li>

من فعلا کد جی کوئری میخوام

[EmadGh 4]

از this برای دسترسی به object فعلی استفاده کن.

$(function() {
var img="";
$('.poster ul>li img').click(function(e){
e.preventDefault();
var img= $(this).attr('src');
$('.img img').attr('src',img);
});
});

[M.Javad 684]

از this برای دسترسی به object فعلی استفاده کن.

 $(function() { var img=""; $('.poster ul>li img').click(function(e){ e.preventDefault(); var img= $(this).attr('src'); $('.img img').attr('src',img); }); }); 

داداش مرسی این یکی مشکلم حل شد