دانلود رایگان کد گالری تصویر بسیار جذاب با html,jquery,css

ایجاد ساختار

HTML در 2 اصلی ساختار <div> با کلاس ( .cd-slider-wrapperو .cd-item-info) - اولی مربوط به گالری عکس و دوم اطلاعات محصول (عنوان، دکمه عمل ..) - پیچیده در داخل یک section.cd-single-item. محتوای باقی مانده در یک .cd-contentبخش جداگانه وارد شده است .

<section class="cd-single-item">
   <div class="cd-slider-wrapper">
      <ul class="cd-slider">
         <li class="selected"><img src="img/img-1.jpg" alt="Product Image 1"></li>
         <li><img src="img/img-2.jpg" alt="Product Image 1"></li>
         <li><img src="img/img-3.jpg" alt="Product Image 2"></li>
      </ul> <!-- cd-slider -->

      <ul class="cd-slider-navigation">
         <li><a href="#0" class="cd-prev inactive">Next</a></li>
         <li><a href="#0" class="cd-next">Prev</a></li>
      </ul> <!-- cd-slider-navigation -->

      <a href="#0" class="cd-close">Close</a>
   </div> <!-- cd-slider-wrapper -->

   <div class="cd-item-info">
      <h2>Produt Title</h2>
      <p>Lorem ipsum dolor sit amet...</p>
      <button class="add-to-cart">Add to cart</button>            
   </div> <!-- cd-item-info -->
</section> <!-- cd-single-item -->

<section class="cd-content">
   <!--  other content here -->
</section>

توجه داشته باشید که .cd-slider-paginationعنصر (صفحه بندی ) به طور مستقیم در HTML وارد نشده اما با استفاده از jQuery ایجاد شده است.

افزودن سبک

در دستگاه های کوچک CSS بسیار ساده است: هر دو .cd-slider-wrapperو .cd-item-infoدر عرض کامل هستند و از جریان استاندارد صفحه پیروی می کنند.

در دستگاههای دسکتاپ (عرض نمایش دهی بیش از 1024 پیکسل) ما یک position: absolute و  width: 50%به آن اختصاص داده .cd-item-infoو آن را در سمت راست صفحه قرار دادیم . 
برای .cd-slider-wrapperعنصر، ما مجموعه width: 50%. هنگامی که کاربر بر روی گالری تصویر کلیک می کند، .cd-slider-activeکلاس را به  .cd-single-itemبخش اضافه می کنیم :  .cd-slider-wrapperعرض به 100٪ تعیین می شود؛ این راه .cd-slider-wrapperافزایش می یابد، پوشش .cd-item-info(که در آن است position: absolute) و پایین آوردن محتوای باقی مانده است. CSS3  برای دستیابی به انیمیشن صاف، انتقال به مقدار عرض افزوده شده است.

@media only screen and (min-width: 1024px) {
  .cd-slider-wrapper {
    transition: width 0.4s;
    width: 50%; 
  }
  .cd-slider-active .cd-slider-wrapper {
    width: 100%; 
  } 
}
@media only screen and (min-width: 1024px) {
  .cd-item-info {
    position: absolute;
    width: 50%;
    top: 0;
    right: 0;
    padding: 60px 60px 0;
  } 
}

برای این روش به درستی کار می کنند، تصاویر گالری باید دارای نسبت عرضی بالاتر از 1 (عرض بالاتر از ارتفاع) باشد.هنگامی که تصویر در حالت نمایش اسلاید است، ارتفاع آن به نسبت عرض آن افزایش می یابد. بنابراین یک تصویر با نسبت عرضی کوچکتر از 1 باعث پیمایش بیشتر خواهد شد. 
علاوه بر این، از آنجا که .cd-item-infoدر آن است position: absolute، ارتفاع آن .cd-single-itemفقط با اندازه تصویر گالری تنظیم می شود. در نتیجه .cd-item-info ارتفاع باید کوچکتر از تصویر گالری باشد.