All geek questions in one place

JQuery show row based image

I have a list of images. On hover, I need to call a function in the LI for each row that hides all the images in that row except the current image. There is only one list. I have JS to add a data attribute for each of the rows (this is not included in the sample code for brevity). How to connect to a data attribute that is dynamically set in rows to call a function that shows and hides images in each row? Currently, all rows are awaiting. Fiddle http://jsfiddle.net/simply_simpy/2dNgF/

HTML

<div class="container" id="main"> <div id="add-8" class="row"> <div class="col-lg-11"> <ul class="list-unstyled list-inline the-wrap add-8 show-text"> <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="1"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="2"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> <li data-row="3"><img class="full" src="http://lorempixel.com/g/150/150/" /> <span class= "cover" "><img src= "http://i.imgur.com/zK3d6yX.png?1" /></span></li> </ul> </div> </div>

CSS

  #main { background: #fff; overflow: hidden; min-height: 800px; } .wrap-the-wrap { position: relative; } .tell-story .hidden { display: none; } ul.the-wrap { overflow: hidden; } ul.the-wrap p { margin: 0; } ul.the-wrap img { width: 133px; height: auto; } ul.the-wrap .cover { position: absolute; bottom: -150px; left: 0; } ul.the-wrap .more { width: 37px; height: 36px; display: block; position: absolute; bottom: -15px; left: 0; } ul.the-wrap li { float: left; position: relative; padding-left: 0; padding-right: 0; margin-left: 2px; } ul.the-wrap .text { width: 300px; position: absolute; left: 150px; top: 30px; z-index: 1; display: none; color: #333; }

Js

 $(document).on("mouseenter", ".add-8 li", function () { $(this).find(".cover").addClass('current'); animateCover("-30px"); $(this).find(".text").fadeIn("fast"); }); //covers image with white image $(document).on("mouseleave", ".add-8 li", function () { $(this).find(".cover").removeClass('current'); animateCover("-150px"); $(this).find(".text").fadeOut("fast"); }) function animateCover(pos) { $("li .cover") .not(".current") .stop() .animate({"bottom": pos}, 250); }
+4
source share
2 answers

Note. Adding as another answer since the script is already big

With data attribute

 $(document).on("mouseenter", ".add-8 li", function () { var $this = $(this), rowId = $this.attr('data-row'); $this.find(".cover").addClass('current'); animateCover($this.siblings('[data-row="' + rowId + '"]'), "-30px"); $this.find(".text").fadeIn("fast"); }); //covers image with white image $(document).on("mouseleave", ".add-8 li", function () { var $this = $(this), rowId = $this.attr('data-row'); $this.find(".cover").removeClass('current'); animateCover($this.siblings('[data-row="' + rowId + '"]'), "-150px"); $this.find(".text").fadeOut("fast"); }) $(window).resize(assignRowIds); assignRowIds(); function assignRowIds(){ var $els = $('.add-8 li'), row = 0, top; $els.each(function(){ var $this = $(this), eltop = $this.offset().top; if(eltop != top){ row++; top = eltop; } $this.attr('data-row', row) }) } function animateCover($rowels, pos) { $rowels.find('.cover') .not(".current") .stop() .animate({"bottom": pos}, 250); }

Demo: Fiddle

+1
source

Solution without the data attribute that you specified

 $(document).on("mouseenter", ".add-8 li", function () { var $this = $(this); $this.find(".cover").addClass('current'); animateCover(rowEls(this), "-30px"); $this.find(".text").fadeIn("fast"); }); //covers image with white image $(document).on("mouseleave", ".add-8 li", function () { $(this).find(".cover").removeClass('current'); animateCover(rowEls(this), "-150px"); $(this).find(".text").fadeOut("fast"); }) function rowEls(el){ var $this = $(el), top = $this.offset().top; return $this.parent().children().filter(function(){ return $(this).offset().top == top; }) } function animateCover($rowels, pos) { $rowels.find('.cover') .not(".current") .stop() .animate({"bottom": pos}, 250); }

Demo: Fiddle

+1
source

Source: https://habr.com/ru/post/1498288/

More articles:


All Articles