ملت وب مرجع دانلود قالب وردپرس فارسی و قالب فارسی وردپرس و قالب html و افزونه وردپرس
24
ساعت با شما

04144235034

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

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

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

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

دسته بندی :
دانلود رایگان کد گالری تصویر بسیار جذاب با 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 ارتفاع باید کوچکتر از تصویر گالری باشد.

حميد  شریفی
نویسنده
حميد شریفی
تعداد بازدید: 1007
تعداد دانلود : 212
تاریخ 1397-2-22
کانال تلگرامی ما تا 50% تخفیف دریافت کنید
مطالبی که شاید خوشتان بیاد