سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

سبد خرید خالی می باشد
مبلغ کل
0
تسویه حساب

دانلود رایگان کد گالری تصویر بسیار جذاب با html,jquery,css
حميد  شریفی
حميد شریفی
تعداد کل دانلود ها : 590513
تعداد کل مطالب : 1185

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

تعداد دانلود:
983
تعداد بازدید:
10566
تاریخ:

هشتگ ها :

#اسلایدر ساده

ایجاد ساختار

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

محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

ملت وب در سال 1393 فعالیت خود را در چهار بخش قالب های آماده، طراحی لوگو، طراحی سایت، طراحی بنر آغاز کرده است، که در مدت بسیار کم با تلاش های بی وقفه خود و همکاران توانسته بزرگترین وب سایت ارائه دهنده قالب های با کیفیت در ایران باشد رمز موفقیت شرکت ملت وب پشتیبانی بی دریغ از کاربران خود می باشد ما موقعیت خود را مدیون مشتریان وفادار خود هستیم پس همیشه همراهشان خواهیم بود .

  • logo-samandehi