رفتن به مطلب

راهنمایی برای خلاصه کردن کدهای جی کوئری


پست های پیشنهاد شده

سلام و درود

دوستان من یه سری کد نوشتم که توی یه گالری تصاویر استفاده میشه. متاسفانه برای هر تصویر باید این کدها تکرار بشه و خوب توی داینامیک کردن با وردپرس قطعا به مشکل میخورم. می خواستم بدونم راهی وجود داره که من این کدهای جی کوئری رو طوری بنویسم که با اضافه کردن هر توصویر کدهای جی کوئری رو اتوماتیک اضافه کنه؟

ممنون.

کدهای html:

<table id="gallery">
            <tr>
              <td>
                <div class="image">
                  <img src="images/img1.jpg" alt="" id="img1">
                </div>
              </td>
              <td>
                <div class="image">
                  <img src="images/img2.jpg" alt="" id="img2">
                </div>
              </td>
              <td>
                <div class="image">
                  <img src="images/img3.jpg" alt="" id="img3">
                </div>
              </td>
            </tr>
            <tr>
              <td>
                <div class="image">
                  <img src="images/img4.jpg" alt="" id="img4">
                </div>
              </td>
              <td>
                <div class="image">
                  <img src="images/img5.jpg" alt="" id="img5">
                </div>
              </td>
              <td>
                <div class="image">
                  <img src="images/img6.jpg" alt="" id="img6">
                </div>
              </td>
            </tr>
          </table>

          <div id="bigimage">
            <div id="close"></div>
              <img src="" alt="">
              <div id="next"></div>
              <div id="prev"></div>
          </div>

کدهای css:

.image:hover {
  cursor: pointer;
}
.image img {
  border: 2px solid #333;
  border-radius: 5px;
}
.image:hover img {
  transform: scale(0.98);
}
#bigimage {
  height: 100vh;
  width: 100%;
  background-color: rgba(0,0,0,.8);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}
#bigimage img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 5px;
}
#bigimage #close {
  height: 40px;
  width: 45px;
  position: sticky;
  top: 30px;
  right: 40px;
  background: transparent url('../images/cancel.png') no-repeat center center /contain;
  background-size: 24px;
}
#bigimage #close:hover {
  cursor: pointer;
}
#next {
  height: 100px;
  width: 30px;
  background: transparent url('../images/arrow_right.png') no-repeat center center /contain;
  background-size: 32px;
  line-height: 100px;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
#next:hover {
  cursor: pointer;
}
#prev {
  height: 100px;
  width: 30px;
  background: transparent url('../images/arrow_left.png') no-repeat center center /contain;
  background-size: 32px;
  line-height: 100px;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
}
#prev:hover {
  cursor: pointer;

کدهای جی کوئری:

$(document).ready(function() {
  flag=0;
  $("#img1").click(function() {
    $("#bigimage").fadeIn();
    $("#bigimage img").attr('src', 'images/img1.jpg');
    flag=1;
  });

  $("#img2").click(function() {
    $("#bigimage").fadeIn();
    $("#bigimage img").attr('src', 'images/img2.jpg');
    flag=2;
  });

  $("#img3").click(function() {
    $("#bigimage").fadeIn();
    $("#bigimage img").attr('src', 'images/img3.jpg');
    flag=3;
  });

  $("#img4").click(function() {
    $("#bigimage").fadeIn();
    $("#bigimage img").attr('src', 'images/img4.jpg');
    flag=4;
  });

  $("#img5").click(function() {
    $("#bigimage").fadeIn();
    $("#bigimage img").attr('src', 'images/img5.jpg');
    flag=5;
  });

  $("#img6").click(function() {
    $("#bigimage").fadeIn();
    $("#bigimage img").attr('src', 'images/img6.jpg');
    flag=6;
  });

  $("#close").click(function() {
    $("#bigimage").fadeOut();
  });

  $("#next").click(function() {
    if (flag==1) {
      $("#bigimage img").attr('src', 'images/img1.jpg');
      flag=2;
    }
    else if (flag==2) {
      $("#bigimage img").attr('src', 'images/img2.jpg');
      flag=3;
    }
    else if (flag==3) {
      $("#bigimage img").attr('src', 'images/img3.jpg');
      flag=4;
    }
    else if (flag==4) {
      $("#bigimage img").attr('src', 'images/img4.jpg');
      flag=5;
    }
    else if (flag==5) {
      $("#bigimage img").attr('src', 'images/img5.jpg');
      flag=6;
    }
    else if (flag==6) {
      $("#bigimage img").attr('src', 'images/img6.jpg');
      flag=1;
    }
  });

  $("#prev").click(function() {
    if (flag==1) {
      $("#bigimage img").attr('src', 'images/img6.jpg');
      flag=6;
    }
    else if (flag==2) {
      $("#bigimage img").attr('src', 'images/img1.jpg');
      flag=1;
    }
    else if (flag==3) {
      $("#bigimage img").attr('src', 'images/img2.jpg');
      flag=2;
    }
    else if (flag==4) {
      $("#bigimage img").attr('src', 'images/img3.jpg');
      flag=3;
    }
    else if (flag==5) {
      $("#bigimage img").attr('src', 'images/img4.jpg');
      flag=4;
    }
    else if (flag==6) {
      $("#bigimage img").attr('src', 'images/img5.jpg');
      flag=5;
    }
  });
});

 

a.png

لینک به ارسال

سلام و درود @unid_user

 

کد جی کوئری شما میشه به شکل زیر باشه.

(function($) {
	$(function() {
	
		var index, length;
		
		$('#gallery img').click(function() {
			
			length = $('#gallery img').length;
			index = $(this).index("#gallery img");
			
			$("#bigimage").fadeIn();
			$("#bigimage img").attr('src', $(this).attr('src'));
			
		});
		
		$("#close").click(function() {
		
			$("#bigimage").fadeOut();
			
		});
		
		$('#next').click(function() {
			
			index += 1
			index = ((index + 1) > length) ? 0 : index;
			$("#bigimage img").attr('src', $('#gallery img').eq(index).attr('src'));
		
		});
		
		$('#prev').click(function() {
			
			index -= 1
			index = ((index + 1) > length) ? length - 1 : index;
			$("#bigimage img").attr('src', $('#gallery img').eq(index).attr('src'));
		
		});
		
	});
})(jQuery);

 

موفق باشید

لینک به ارسال
در 17 دقیقه قبل، mehran-be گفته است :

سلام و درود @unid_user

 

کد جی کوئری شما میشه به شکل زیر باشه.

موفق باشید

 

ممنون. من میخوام که بدون نیاز به دسترسی به کدها هربار که کاربر یه تصویری رو اضافه میکنه اتوماتیک یه id به نام مثلا imgX به تگ های img اضافه کنه. چون اگه id اضافه نشه گالری کار نمیکنه.

لینک به ارسال
در هم اکنون، unid_user گفته است :

ممنون. من میخوام که بدون نیاز به دسترسی به کدها هربار که کاربر یه تصویری رو اضافه میکنه اتوماتیک یه id به نام مثلا imgX به تگ های img اضافه کنه. چون اگه id اضافه نشه گالری کار نمیکنه.

مشکل نداره هر تعداد تصویر باشه کدی که فرستادم هندل میکنه کاری هم به آیدی نداره. آیدی هم باشه مشکلی نداره ولی کد من از آیدی استفاده نمیکنه.

لینک به ارسال
در هم اکنون، mehran-be گفته است :

مشکل نداره هر تعداد تصویر باشه کدی که فرستادم هندل میکنه کاری هم به آیدی نداره. آیدی هم باشه مشکلی نداره ولی کد من از آیدی استفاده نمیکنه.

درسته تست کردم. اما چطور اینکار رو کردید اگه براتون زحمتی نیست لطفا یه توضیح کوتاه بفرمایید. ممنون

لینک به ارسال
در 1 دقیقه قبل، unid_user گفته است :

درسته تست کردم. اما چطور اینکار رو کردید اگه براتون زحمتی نیست لطفا یه توضیح کوتاه بفرمایید. ممنون

وقتی روی عکس کلیک میشه تعداد تگ های img داخل تیبل شمارش میشه و داخل متغییر length قرار میگیره. سپس شماره تگ img ای که روش کلیک شده گرفته میشه و داخل متغییر index قرار میگیره. مقدار index اصطلاحا Zero Based هست و از صفر شروع میشه یعنی اولین عکس توی جدول شمارش 0 هست. سپس src عکسی که روش کلیک شده گرفته میشه و داخل src اون تگ img که باکس مادرش آیدی bigimage داره واسه نمایش قرار میگیره.

وقتی روی next کلیک میشه شماره توی index یکی اضافه میشه بهش بعد اون شماره ایندکس src تگ img اش گرفته میشه و داخل src اون تگ img که باکس مادرش آیدی bigimage داره برای نمایش قرار میگیره. البته اگر index + 1 بزرگتر از متغییر length که تعداد کل عکس ها بود index صفر میشه و برمیگرده به عکس اول.

وقتی روی prev کلیک میشه شماره توی index یکی کم میشه بهش بعد اون شماره ایندکس src تگ img اش گرفته میشه و داخل src اون تگ img که باکس مادرش آیدی bigimage داره برای نمایش قرار میگیره. البته اگر index + 1 بزرگتر از متغییر length که تعداد کل عکس ها بود index برابر با تعداد کل عکس ها منهای 1 میشه و برمیگرده به عکس آخر.

 

انشاا... که متوجه شدید.

لینک به ارسال
در 3 دقیقه قبل، mehran-be گفته است :

انشاا... که متوجه شدید.

 

خیلی ممنون. واقعا زحمتتون دادم. فقط یه مشکلی که الان هست اینه که وقتی اسلاید به آخر می رسه با زدن دکمه prev اسلاید عمل نمیکنه ولی این حالت برای حرکت رو به جلو وجود نداره و اسلاید چندین با تکرار میشه.

لینک به ارسال
در 9 دقیقه قبل، unid_user گفته است :

خیلی ممنون. واقعا زحمتتون دادم. فقط یه مشکلی که الان هست اینه که وقتی اسلاید به آخر می رسه با زدن دکمه prev اسلاید عمل نمیکنه ولی این حالت برای حرکت رو به جلو وجود نداره و اسلاید چندین با تکرار میشه.

(function($) {
	$(function() {
	
		var index, length;
		
		$('#gallery img').click(function() {
			
			length = $('#gallery img').length;
			index = $(this).index("#gallery img");
			
			$("#bigimage").fadeIn();
			$("#bigimage img").attr('src', $(this).attr('src'));
			
		});
		
		$("#close").click(function() {
		
			$("#bigimage").fadeOut();
			
		});
		
		$('#next').click(function() {
			
			index += 1
			index = ((index + 1) > length) ? 0 : index;
			$("#bigimage img").attr('src', $('#gallery img').eq(index).attr('src'));
		
		});
		
		$('#prev').click(function() {
			
			index -= 1
			index = ((index + 1) == 0) ? length - 1 : index;
			$("#bigimage img").attr('src', $('#gallery img').eq(index).attr('src'));
		
		});
		
	});
})(jQuery);

 

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...