Get multiple images width in JS - javascript

I am using a JS slider with 5 slides each with an image and a caption. I want to add a class only in that image where width > 2xheight. Following is my JS code:
$(".slides img").each(function() {
var w = $("img.gallery").width();
var h = $("img.gallery").height() * 2;
if (w > h) {
$(this).addClass("auto");
};
});
Please help me to solve this problem. Thanks in advance,
Chirag.
Below is my HTML code:
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide1.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide5.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<center>
<div class="intro">
<h1 class="head">Incredible India | Tiffin</h1>
<p class="text">Use what you know about your users to determine whether the words
and phrases you plan to use are appropriate.</p>
</div>
</center>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide2.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide2.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide3.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide3.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/large/slide4.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide4.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<span data-picture data-alt="WK Credentials">
<span data-src="images/slide5.jpg" data-media="(min-width: 1601px)"></span>
</span>
<img src="images/slide5.jpg" id="myImg" alt="" title="" class="gallery" />
<p class="flex-caption">Extra Wide Image</p>
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li><a class="prev" href="#"><img src="images/themes.png" alt="" title="" /></a></li>
<li><a class="next" href="#"><img src="images/themes.png" alt="" title="" /></a></li>
</ul>
</div>

Try this:
$(document).ready(function(){
$(".slides img").each(function(){
$(this).load(function(){
var w = $(this).width();
var h = $(this).height() *2;
if(w > h){
$(this).addClass("auto");
};
});
});
});

If the class "gallery" is actually significant here this might help, otherwise the other answers would work.
$(window).load(function(){
$(".slides img.gallery").each(function(){
if($(this).width() > ($(this).height()*2)) {
$(this).addClass("auto");
};
});
});

Related

how to use same jQuery function on multiple group of lists

I have Unordered list, and each item of the list has a list of images. I wrote a jQuery function to operate slider using prev and next. The function working write when there is only one list of images. Nonetheless, when I have list and each item has list of images when ever I clicked on any slider only the first slider is working regardless on which slider I clicked. my question is, How can I modify the jQuery function to operate only for the slider that I clicked on and not other sliders for other group of images.
Here is the html code:
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act" >
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Here is the jQuery function:
$(document).ready(function() {
$('.swipe-prev').click(function(){
console.log("Prev"); // Print "Prev" on click swipe-prev
var prevImg = $('img.active').prev('.result-image-act img');
if(prevImg.length == 0) {
prevImg = $('.result-image-act img:last');
}
$('img.active').removeClass('active');
prevImg.addClass('active');
});
$('.swipe-next').click(function() {
console.log("Next"); // Print "Next" on click swipe-next
var nextImg = $('img.active').next('.result-image-act img');
if(nextImg.length == 0) {
nextImg = $('.result-image-act img:first');
}
$('img.active').removeClass('active');
nextImg.addClass('active');
});
});
You may reduce everything to only one event handler.
$('.swipe-prev, .swipe-next').on('click', function (e) {
var op = ($(this).is('.swipe-prev')) ? 'prev' : 'next';
var firtOrlast = ($(this).is('.swipe-prev')) ? 'last' : 'first';
var imgList = $(this).closest('.result-row');
var currImg = imgList.find('.result-image-act img.active');
var nextImg = currImg[op]();
if (nextImg.length == 0) {
nextImg = imgList.find('.result-image-act img:' + firtOrlast);
}
currImg.removeClass('active');
nextImg.addClass('active');
});
.active {
padding: 3px;
border: 1px solid #021a40;
background-color: #ff0;
}
.swipe-wrap {
display: inline-flex;
}
.swipe-wrap > div {
padding-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="results">
<li class="result-row">
<!-- image box -->
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p> ></p>
</div>
</a>
</div>
</div>
</a>
</li>
<!-- -->
<li class="result-row">
<a href="#">
<div class="result-image-act">
<img src="https://dummyimage.com/100x100/000/fff&text=1" class="active">
<img src="https://dummyimage.com/100x100/000/fff&text=2">
<img src="https://dummyimage.com/100x100/000/fff&text=3">
<img src="https://dummyimage.com/100x100/000/fff&text=4">
</div>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<a href="#">
<div class="swipe-prev">
<p><</p>
</div>
</a>
</div>
<div class="swipe-wrap-rig">
<a href="#">
<div class="swipe-next">
<p>></p>
</div>
</a>
</div>
</div>
</a>
</li>
</ul>
Your problem is coming from how you find the active image. There are presumably multiples, but you want to find the one related to whatever was clicked. Change lines like this:
$('img.active')
to something like:
$(this).closest("ul.results").find("img.active")
to get the img.active within the clicked ul.

JQuery hover toggle related selector

I have a list of images and separate list where each item is related to an image. Is it possible to have a hover event that fades the related image in and out using JQuery? I.e. when you hover over listid-1, image-1 fades in.
This is the best I could do:
$(document).ready(function(){
$( ".options li" ).hover(function( event ) {
$('.image-' + (this - ".listid")).toggleFade( "300" );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg'>
<img class='image-2' src='2.jpg'>
<img class='image-3' src='3.jpg'>
<img class='image-4' src='4.jpg'>
<img class='image-5' src='5.jpg'>
</div>
<div class="options">
<nav>
<ul>
<li class='listid-1'>One</li>
<li class='listid-2'>Two</li>
<li class='listid-3'>Three</li>
<li class='listid-4'>Four</li>
<li class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>
You have a couple of issues. Firstly concatenating the this reference with a string isn't going to give you a valid selector. Secondly, the method name is fadeToggle(), not toggleFade().
To fix the problems you could first group the li and img elements by giving them all the same respective classes, then relate the hovered li to the img by their indexes, something like this:
$(document).ready(function() {
$(".options .listid").hover(function(event) {
$('.image').eq($(this).index()).fadeToggle("300");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image' src='1.jpg'>
<img class='image' src='2.jpg'>
<img class='image' src='3.jpg'>
<img class='image' src='4.jpg'>
<img class='image' src='5.jpg'>
</div>
<div class="options">
<nav>
<ul>
<li class='listid'>One</li>
<li class='listid'>Two</li>
<li class='listid'>Three</li>
<li class='listid'>Four</li>
<li class='listid'>Five</li>
</ul>
</nav>
</div>
</div>
You can get class of current li and split at - to get number and use it as selector for image.
$('img').hide()
$(".options li").hover(function() {
$('.image-' + ($(this).attr('class').split('-')[1])).fadeToggle("300");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg' alt="1">
<img class='image-2' src='2.jpg' alt="2">
<img class='image-3' src='3.jpg' alt="3">
<img class='image-4' src='4.jpg' alt="4">
<img class='image-5' src='5.jpg' alt="5">
</div>
<div class="options">
<nav>
<ul>
<li class='listid-1'>One</li>
<li class='listid-2'>Two</li>
<li class='listid-3'>Three</li>
<li class='listid-4'>Four</li>
<li class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>
If you have multiple classes on images instead you can use data attributes to select images.
$('img').hide()
$(".options li").hover(function() {
$('img.image-' + $(this).data('img')).fadeToggle(300)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='images'>
<img class='image-1' src='1.jpg' alt="1">
<img class='image-2' src='2.jpg' alt="2">
<img class='image-3' src='3.jpg' alt="3">
<img class='image-4' src='4.jpg' alt="4">
<img class='image-5' src='5.jpg' alt="5">
</div>
<div class="options">
<nav>
<ul>
<li data-img="1" class='listid-1'>One</li>
<li data-img="2" class='listid-2'>Two</li>
<li data-img="3" class='listid-3'>Three</li>
<li data-img="4" class='listid-4'>Four</li>
<li data-img="5" class='listid-5'>Five</li>
</ul>
</nav>
</div>
</div>

Search Items using jquery

I'm trying to create a search using jQuery
$(function() {
var opts = $('#content li').map(function() {
return [[this.value, $(this).text()]];
});
$('#someinput').keyup(function(){
var rxp = new RegExp($('#someinput').val(), 'i');
var content = $('#content').empty();
opts.each(function() {
if (rxp.test(this[1])) {
content.append($('</li>').attr('value', this[0]).text(this[1]));
}
});
});
});
<input type="text" id="someinput" placeholder="Search" name="search" >
<section id="content">
<ul id="newSonglist">
<!-- items here -->
</ul>
</section>
Items look like this:
<li onclick="myControl.selectList(this,1)">
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Chris Brown Grass Aint Greener
<p>Sent by Nikan</p>
</div>
</li>
When I search Chris Brown it will remove all of the contents and it does not exclude the Chris Brown. Can you guys help me make it work? Thanks.
Your code works fine except for your new li creation. You are creating the li element using $('</li>') instead of $('<li>') (Note the /)
// You wrote </li> instead of <li>
content.append($('<li>').attr('value', this[0]).text(this[1]));
See this fiddle
I'm not very sure if I got what you trying to do, however for a simple JavaScript search UI, I'd rather do something more in the following fashion:
$(function() {
$("#someinput").on("keyup", function() {
var search_string = $(this).val()
var criteria = new RegExp(search_string, "i");
$("#content li").each(function() {
var li_element = $(this);
var filtered_out = li_element.text().match(criteria) == null && search_string.length > 0
if (filtered_out) {
li_element.hide();
} else {
li_element.show();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="someinput" placeholder="Search" name="search">
<section id="content">
<ul id="newSonglist">
<!-- items here -->
</ul>
<li>
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Chris Brown Grass Aint Greener
<p>Sent by Nikan</p>
</div>
</li>
<li>
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Jack Johnson
<p>Sent by Nikan</p>
</div>
</li>
<li>
<a class="frmPlay" href="">
<img class="frmPlay" src="images/Right.png" alt="">
</a>
<span style="display:none;" class="musicData" pic="" title="Chris" brown="" grass="" aint="" greener="" value=""></span>
<div class="r">
<img class="picStyle" src="">
</div>
<div class="textBox">
Aguillera
<p>Sent by Nikan</p>
</div>
</li>
</section>

Hover Icons in Justified Gallery

I am creating images grid and I am using the following library Justified Gallery. The hover effect is working fine for the img-alt attribute. but I want to display some icons with links on the hover.
Just like the following picture
Take a look the the following Fiddle
https://jsfiddle.net/zvj2o7fy/1/embedded/result/
<div id="justifiedGallery">
<a href="#" title="What's your destination?">
<img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Just in a dream Place">
<img alt="Just in a dream Place" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Il Capo at Palermo">
<img alt="Il Capo at Palermo" src="http://lorempixel.com/300/226/?1" />
</a>
<a href="#" title="Erice">
<img alt="Erice" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/127/300/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/440/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/240/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/227/340/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/140/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
<a href="#" title="Truthful Innocence">
<img alt="Truthful Innocence" src="http://lorempixel.com/340/227/?1" />
</a>
</div>
Please help me to create this.
as per documentation(http://miromannino.github.io/Justified-Gallery/captions/)
remove title attribute and add a div with class caption
just like
<a href="#">
<img alt="What's your destination?" src="http://lorempixel.com/340/227/?1" />
<div class="caption">
<div class="icon-cart">
<img src="https://cdn1.iconfinder.com/data/icons/flat-artistic-shopping-icons/32/shopping-32.png"/>
</div>
</div>
</a>
in this div you can add any thing.
If you need links on caption, need a small structure change like
<div id="justifiedGallery">
<div>
<a href="http://lorempixel.com/340/227/?1">
<img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
</a>
<div class="caption">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
<a href="#">
<i class="fa fa-cloud-download"></i>
</a>
</div>
</div>
<div>
<a href="http://lorempixel.com/340/227/?1">
<img alt="Title 1" src="http://lorempixel.com/340/227/?1" />
</a>
<div class="caption">
<a href="#">
<i class="fa fa-shopping-cart"></i>
</a>
<a href="#">
<i class="fa fa-cloud-download"></i>
</a>
</div>
</div>
</div>
Justified Gallery recommends using the Colorbox jQuery library inside of a callback to achieve what you are trying to do. Colorbox controls a caption lightbox div that gets shown on hover.
If you look at the Colorbox 'multiple galleries with one call' demo, you'll see you can add custom icons for each image by adding a hidden div called caption inside of the gallery container:
<div class="container">
<a href="image.jpg" class="jg-entry cboxElement">
<img alt="Alt Message" src="image.jpg">
<div class="caption">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
</div>
</a>
</div>
To invoke the captions and make them appear via JS, you'll make your call to Colobox inside of justified gallery's callback via the .jg-complete class. Inside of the callback, the colorbox library is invoked with the necessary parameters (like opacity and transition shown in the code sample below) to get your icons fading into view exactly you would like.
JS:
$('.container').justifiedGallery({
rowHeight : 50
}).on('jg.complete', function () {
$(this).find('a').colorbox({
maxWidth : '80%',
maxHeight : '80%',
opacity : 0.8,
transition : 'elastic',
current : ''
});
});
You can dynamically replace the caption with whatever you like. Here's a quick solution.
$("img").mouseenter(function(){
$(this).siblings(".caption").html("<div><a href='#'><img src='source'></a>");
});
Use jquery hover selector to set the display of icons
The default display of icons should be none in css
This should help
https://codeshare.io/IGavT

Change class of list of li elements

I tried for changing the class name of li with class each_feature to each_feature--display.On each click of load more I need to change class for next 3 li inside ul.
But the below javascript is not working for me. On load I called load_more.display_items() this also doesn't work.
Someone please help me to make this work
<div class="export">
<section class="container">
<h2> Components Identified by scanner</h2>
<ul class="components_features">
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<li class="each_feature">
<a href="//Nginx.com" target="_blank" title="Nginx" >
<h2 class="tech_name">
Nginx
</h2>
</a>
<div class="octo">
<div class="octo1">
<img src="http://farm3.staticflickr.com/2441/3657346647_a11111ed39_z.jpg?zz=1" alt="" width="320" height="316" />
</div>
</div>
</li>
<a class="link" onclick="load_more.show_more_items()">
<span >Load more ...</span>
</a>
<hr>
</section>
</div>
Javascript:
var load_more = {
el: $('.export .components_features'),
list_index: 3,
display_items: function() {
if((this.list_index + 3) > this.el.find('.each_feature').length) {
this.el.find('.each_feature').addClass('each_feature--display');
}
this.el.find('.each_feature:lt(' + this.list_index + ')').addClass('each_feature--display');
},
show_more_items: function() {
this.list_index += 3;
this.display_items();
}
}
Something like this? Made in pure JS. For the a tag, you might want to prevent default link action if you are going to put a href.
<html>
<head>
<style>
.feature{
display: none;
}
</style>
<script>
function loadMore(){
features = document.getElementsByClassName("feature");
if(features.length > 0){
var count = 0;
while(features.length && count < 3){
count++;
features[0].className = "featureDisplay";
}
}
}
</script>
</head>
<body>
<ul>
<li class="feature">
1
</li>
<li class="feature">
2
</li>
<li class="feature">
3
</li>
<li class="feature">
4
</li>
<li class="feature">
5
</li>
<li class="feature">
6
</li>
<a onclick="loadMore()">Load more ...</a>
</ul>
</body>
</html>
The problem with using a for loop is that the value returned is a node list list which is a live object and it messes up the array when you modify a class. Read more about it here: javascript changes one some class names
on the 'load more' do this
$(".each_feature").addClass('each_feature--display');
$(".each_feature--display").removeClass('each_feature');
Of course you will have to adapt the code

Categories