jQuery

【jQuery】Gallery系プラグインExpandable Image Gallery

December 12, 2014
Expandable Image Gallery

クリックで拡大した画像をギャラリー表示するプラグイン。

HTML

<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>

CSS

@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;
  } 
}