دانلود سورس js , css نمایش گالری تصاویر به صورت سه بعدی

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

درباره IE9: حتی اگر اثر 3D و لغزنده قابل مشاهده نباشد، گالری فقط کار خوبی خواهد کرد.

مطمئنا می توان سایر کاربردهای این قطعه کد را استفاده کرد. احساس آزادی کنید!

ایجاد ساختار

ساختار اصلی لیست نامحدود است. هر آیتم لیست حاوی یک لیست غیر ارادی توزیع شده است. علاوه بر فهرست نامحدود توپی (تصاویر 3+ محصول) ما نیاز به عناصر دیگر: اطلاعات محصول (عنوان و قیمت)، ناوبری (2 فلش برای حرکت بین تصاویر پیش نمایش) و ماشه اثر 3D (فقط در تلفن همراه قابل مشاهده است ، جایی که ما نمی توانیم اثر شناور را به عنوان ماشه استفاده کنیم).

<ul>
   <li>
      <ul class="cd-item-wrapper">
         <li class="cd-item-front"><a href="#0"><img src="img/thumb-1.jpg"></a></li>
         <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg"></a></li>
         <li class="cd-item-back"><a href="#0"><img src="img/thumb-3.jpg"></a></li>
         <li class="cd-item-out"><a href="#0"><img src="img/thumb-4.jpg"></a></li>
         <!-- <li class="cd-item-out">...</li> -->
      </ul> <!-- cd-item-wrapper -->

      <div class="cd-item-info">
         <b><a href="#0">Product Name</a></b>
         <em>$9.99</em>
      </div> <!-- cd-item-info -->

      <nav>
         <ul class="cd-item-navigation">
            <li><a class="cd-img-replace" href="#0">Prev</a></li>
            <li><a class="cd-img-replace" href="#0">Next</a></li>
         </ul>
      </nav>

      <a class="cd-3d-trigger cd-img-replace" href="#0">Open</a>
   </li>

   <li>
      <!-- ... -->
   </li>
</ul>

افزودن سبک

برای ایجاد اثر سه بعدی از تبدیلات 3D CSS3 استفاده کردیم  . برای جلوه های سه بعدی برای کار ما باید یک مقدار چشم انداز را به عنصر والد (لیست نامحدود توشیبا) تنظیم کنیم. ما اعلام 4 کلاس برای اقلام لیست: .cd-item-front، .cd-item-middleو .cd-item-backبرای اولین بار 3 اقلام لیست، در حالی که کلاس .cd-item-outبرای تمام دیگر (و نه قابل مشاهده است) اقلام لیست استفاده می شود - در صورتی که شما می خواهید برای اضافه کردن تصاویر است.

.cd-item-wrapper {
  perspective: 500px;
  perspective-origin: 50% -30%;
}

.cd-item-wrapper li {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.4s;
}

.cd-item-wrapper li.cd-item-front {
  position: relative;
  z-index: 3;
}

.cd-item-wrapper li.cd-item-middle {
  z-index: 2;
}

.cd-item-wrapper li.cd-item-back {
  z-index: 1;
}

.cd-item-wrapper li.cd-item-out {
  /* picture not visible - use this class in case you have more than 3 pictures per item */
  z-index: 0;
  opacity: 0;
}

توجه داشته باشید که مقدار دوم منتقل شده به اموال دید اولیه (محور Y) منفی است. به این ترتیب، هنگامی که ما موارد لیست را در امتداد محور Z فشار می دهیم، آنها در بالای آیتم لیست پیشانی قابل مشاهده هستند.

در دستگاه های بدون لمس، ماژول نمایشگر سه بعدی را به ما نشان می دهد:

.no-touch #cd-gallery-items > li:hover .cd-item-middle {
  transform: translate3d(0, 0, -20px);
  opacity: .8;
}
.no-touch #cd-gallery-items > li:hover .cd-item-back {
  transform: translate3d(0, 0, -40px);
  opacity: .4;
}

در عوض، از دستگاه های لمسی استفاده می کنیم .activeکه توسط یک ضربه روی .cd-3d-triggerتگ لنگر ایجاد می شود.

در نهایت، ما نیاز به 2 کلاس بیشتر برای رسیدگی به اثر لغزش از آیتم لیست جلو. ما از li.move-rightآیتم push استفاده می کنیم  و  li.hiddenدر پایان گذار (با کمک برخی از jQuery) پنهان می کنیم:

.cd-item-wrapper li.move-right {
  transform: translate3d(200px, 0, 0);
  opacity: 0;
  z-index: 4 !important;
}

.cd-item-wrapper li.hidden {
  /* used to hide the picture once it's pushed out - to the right */
  display: none !important;
}

مدیریت رویدادها

ما دو توابع را برای کنترل ظاهر ناوبری تعریف کردیم: updateNavigation () و hideNavigation ():

function updateNavigation(navigation, container) {
   //container is the .cd-item-wrapper element
   var isNextActive = ( container.find('.cd-item-middle').length > 0 ) ? true : false,
       isPrevActive =   ( container.children('li').eq(0).hasClass('cd-item-front') ) ? false : true;
   (isNextActive) ? navigation.find('a').eq(1).addClass('visible') : navigation.find('a').eq(1).removeClass('visible');
   (isPrevActive) ? navigation.find('a').eq(0).addClass('visible') : navigation.find('a').eq(0).removeClass('visible');
}

function hideNavigation(navigation) {
   navigation.find('a').removeClass('visible');
}

در دستگاه های بدون لمس، ما از رویداد شناور برای تغییر ناوبری کشویی استفاده می کنیم؛ در دستگاه های لمسی، به جای این ما از رویداد کلیک در  .cd-3d-triggerتگ لنگر استفاده می کنیم.

هنگامی که کاربر روی ناوبری کشویی ضربه می زند، کلاس هایی که برای .cd-item-wrapper liعناصر ایجاد شده اند را ایجاد می کنیم تا اثر اسلاید 3D ایجاد شود.

var galleryNavigation = $('.cd-item-navigation a');
//change image in the slider
galleryNavigation.on('click', function(){
   var navigationAnchor = $(this),
       direction = navigationAnchor.text(),
       activeContainer = navigationAnchor.parents('nav').eq(0).siblings('.cd-item-wrapper');
   ( direction=="Next") ? showNextSlide(activeContainer) : showPreviousSlide(activeContainer);
   updateNavigation(navigationAnchor.parents('.cd-item-navigation').eq(0), activeContainer);
});