There is a task - to create a gallery of goods, so that by clicking on the preview, it will be displayed in enter image description here window

Of course, you can use a ready-made solution in the form of a plug-in, but I don’t want to load the site once again. I have already used the slider in the project http://responsiveslides.com/ . Is it possible to implement a preview output based on this slider? Or just on jquery ... I would be very grateful for the help.

    1 answer 1

    If something is simple, for example:

    $(document).ready(function(){ $('.slide__link').on('click', function(e){ e.preventDefault(); console.log('Slide show prew On click! \n'); var $this = $(this), item = $this.closest('.slide__item'), wrap = $this.closest('.slideShow'), gap = wrap.find('.slide__gap'), itemPath = $this.find('img').attr('src'), dur = 500; if(!item.hasClass('activSl')){ item.addClass('.activSl').siblings().removeClass('activSl'); gap.find('img').fadeOut(dur, function(){ $(this).attr('src', itemPath).fadeIn(dur); }); } }); }); 
     * { box-sizing: border-box; } ul { padding: 0; margin: 0; list-style-type: none; } img { max-width: 100%; width: 100%; height: auto; } .slideShow { max-width: 700px; width: 100%; margin: 20px auto; } .slide__list { margin: 2px 0; } .slide__item { width: 25%; padding: 1px; position: relative; display: block; float: left; border: 1px solid transparent; } .slide__item:hover { border: 1px solid #333; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="slideShow"> <div class="slide__gap"> <img src="http://eurozabor.kharkov.ua/edit/uploads/page/12/0ca447203ef7436e9f36e0767644fa0d.png" alt=""> </div> <ul class="slide__list flex-row"> <li class="slide__item"> <a href="#" class="slide__link"> <img src="http://eurozabor.kharkov.ua/edit/uploads/page/12/0ca447203ef7436e9f36e0767644fa0d.png" alt=""> </a> </li> <li class="slide__item"> <a href="#" class="slide__link"> <img src="http://eurozabor.kharkov.ua/edit/uploads/page/12/0ca447203ef7436e9f36e0767644fa0d.png" alt=""> </a> </li> <li class="slide__item"> <a href="#" class="slide__link"> <img src="http://eurozabor.kharkov.ua/edit/uploads/page/12/0ca447203ef7436e9f36e0767644fa0d.png" alt=""> </a> </li> <li class="slide__item"> <a href="#" class="slide__link"> <img src="http://eurozabor.kharkov.ua/edit/uploads/page/12/0ca447203ef7436e9f36e0767644fa0d.png" alt=""> </a> </li> </ul> </div>

    • Thank. Only when I insert it into my .js file, in $ (document). Ready (function (), it doesn't work. If I insert it into the html body in <script> tags, it works. Do not tell me what could be the problem? - Alexander
    • @ Alexander, I do not even know! I have $(document).ready in a separate main.js file and it works. Make sure jquery.js is connected. `html code (slideshow) -> jquery.js -> your.js ->` - HamSter