Create a unique div with the class cd-quick-view for each item and assign different ids to them.
<div id="first-item" class="cd-quick-view">
<div class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="selected"><img src="img/item-1.jpg" alt="Product 1"></li>
<li><img src="img/item-2.jpg" alt="Product 2"></li>
<li><img src="img/item-3.jpg" alt="Product 3"></li>
</ul> <!-- cd-slider -->
<ul class="cd-slider-navigation">
<li><a class="cd-next" href="#0">Prev</a></li>
<li><a class="cd-prev" href="#0">Next</a></li>
</ul> <!-- cd-slider-navigation -->
</div> <!-- cd-slider-wrapper -->
<div class="cd-item-info">
<h2>First Item</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione. Numquam eveniet quo, ullam itaque expedita impedit. Eveniet, asperiores amet iste repellendus similique reiciendis, maxime laborum praesentium.</p>
<ul class="cd-item-action">
<li><button class="add-to-cart">Add to cart</button></li>
<li><a href="#0">Learn more</a></li>
</ul> <!-- cd-item-action -->
</div> <!-- cd-item-info -->
<a href="#0" class="cd-close">Close</a>
</div> <!-- cd-quick-view -->
<div id="second-item" class="cd-quick-view">
<div class="cd-slider-wrapper">
<ul class="cd-slider">
<li class="selected"><img src="img/item-1.jpg" alt="Product 1"></li>
<li><img src="img/item-2.jpg" alt="Product 2"></li>
<li><img src="img/item-3.jpg" alt="Product 3"></li>
</ul> <!-- cd-slider -->
<ul class="cd-slider-navigation">
<li><a class="cd-next" href="#0">Prev</a></li>
<li><a class="cd-prev" href="#0">Next</a></li>
</ul> <!-- cd-slider-navigation -->
</div> <!-- cd-slider-wrapper -->
<div class="cd-item-info">
<h2>Second Item</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, omnis illo iste ratione. Numquam eveniet quo, ullam itaque expedita impedit. Eveniet, asperiores amet iste repellendus similique reiciendis, maxime laborum praesentium.</p>
<ul class="cd-item-action">
<li><button class="add-to-cart">Add to cart</button></li>
<li><a href="#0">Learn more</a></li>
</ul> <!-- cd-item-action -->
</div> <!-- cd-item-info -->
<a href="#0" class="cd-close">Close</a>
</div> <!-- cd-quick-view -->
Assign those ids as hrefs to cd-trigger a tags: href="#first-item"
<li class="cd-item">
<img src="img/item-1.jpg" alt="Item Preview">
<a href="#first-item" class="cd-trigger">Quick View</a>
</li> <!-- cd-item -->
<li class="cd-item">
<img src="img/item-1.jpg" alt="Item Preview">
<a href="#second-item" class="cd-trigger">Quick View</a>
</li> <!-- cd-item -->
Retrieve the href of the a tags when clicked then make a quick change in animateQuickView function by adding the href property and passing it through the function.
var href = $(this).attr('href');
animateQuickView(selectedImage, sliderFinalWidth, maxQuickWidth, 'open', href);
Subsequently, replace '.cd-quick-view' with href for the open animation part:
$(href).css({
"top": topSelected,
"left": leftSelected,
"width": widthSelected,
}).velocity({
//animate the quick view: animate its width and center it in the viewport
//during this animation, only the slider image is visible
'top': finalTop+ 'px',
'left': finalLeft+'px',
'width': finalWidth+'px',
}, 1000, [ 400, 20 ], function(){
//animate the quick view: animate its width to the final value
$(href).addClass('animate-width').velocity({
'left': quickViewLeft+'px',
'width': quickViewWidth+'px',
}, 300, 'ease' ,function(){
//show quick view content
$(href).addClass('add-content');
});
}).addClass('is-visible');
To access the complete modified files, check out the link below:
https://drive.google.com/file/d/1OC9uj8haP0t-EBGuJe1dwR4_5zjLq7T_/view?usp=sharing