I have each function, which determines when the link will be clicked in the ID. As soon as the click occurs, it takes the appropriate attributes and associates them with the main image.
This functionality may also include video , so if the html contains an identifier called #video , it takes a video attribute and attaches it to a predefined <video> .
I currently have other functions that are not in the bottom pen, like destroyZoom() (which destroys the zoom function, which is specifically designed for the main image).
Problem: When users switch between images (especially video), the zoom level is automatically activated on top of the image. (I posted placeholders for functions).
Can someone recommend an elegant way to handle this situation or how I wrote this functionality.
Please note: image number 5 is a video.
EDIT: UPDATED CODE AND CODE BELOW CONTAIN INCREASING FUNCTIONS
$('#product-gallery-super').children().click(function(e) { e.preventDefault(); var prodImg = $(this).attr('data-image'); var imgSrc = $(this).children().attr('src') var vidCheck = false; var mainImg = $('.main-image'); if (imgSrc != 'http://yi.yoga/images/cs.jpg') { $(this).addClass("active-thumbnail").siblings().removeClass("active-thumbnail"); if ($(this).attr('id') == 'video') { $('.main-image').hide(); if (!$('.product-video').hasClass('product-video')) { var videoLink = $(this).attr('href'); var videoImg = $(this).find('img').attr('src'); var video = '<div class="video-container"> <video class="flat-video product-video" bgcolor="#FFFFFF" id="mainVideo" poster="' + videoImg + '" autoplay autobuffer width="100%" height="auto"> <source src="' + videoLink + '"> <object type="application/x-shockwave-flash" data="http://vjs.zencdn.net/c/video-js.swf" width="100%" height="auto"> <param name="allowfullscreen" value="false"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=' + videoLink + '"> <!--[if IE]><param name="movie" value="http://vjs.zencdn.net/c/video-js.swf"><![endif]--> <img src="' + videoImg + '" width="100%" height="auto" alt="Video"></object> </video> <span class="playPause icon-play off"></span> <div class="controls-bar off"> <div class="duration"> <div class="duration-amount"></div> </div> </div> <div class="top-controls-bar off"> <div class="info"> </div> </div> </div>'; $('.container').prepend(video);
.active-thumbnail { display: inline-block; border: 1px solid black; } #product-gallery-super img { width: 61px; height: 79px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script> <div class="container"> <img class="main-image image-resize product-zoom" src="http://placehold.it/300x400?text=1" data-zoom-image="http://placehold.it/1000x2000?text=1" onerror="comingSoonMain(this)"> <div id="product-gallery-super"> <a href="#" class="product-zoom-gallery active-thumbnail" data-image="http://placehold.it/300x400?text=1"> <img src="http://placehold.it/61x79?text=1"> </a> <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=2"> <img src="http://yi.yoga/images/cs.jpg"> </a> <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=3"> <img src="http://placehold.it/61x79?text=3"> </a> <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=4"> <img src="http://placehold.it/61x79?text=4"> </a> <a href="http://simplypx.com/images/Prometheus.mp4" id="video" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=VID"> <img src="http://placehold.it/61x79?text=5"> </a> <a href="#" class="product-zoom-gallery" data-image="http://placehold.it/300x400?text=6"> <img src="http://placehold.it/61x79?text=6"> </a> </div> </div>
source share