How to make 2nd Trigger script in paired image button? - javascript

Set A is a scripted paired button image. When you click certain image, it will change to its pair or set of image.
Now If I have another set, Set B, and I want to make set B to work exactly like set A without disrupting each other. How to do this? I tried to give set B new unique ID but confused how to integrate the new ID in the script.
$(document).ready(function() {
$('img').click(function() {
$(this).add($(this).siblings()).toggleClass('hide');
if($(this).attr('id') == 'predator_only') {
$('.predator:not(.hide)').add($('.predator:not(.hide)').siblings()).toggleClass('hide');
}
else if($(this).attr('id') == 'mixed') {
$('.predator.hide').add($('.predator.hide').siblings()).toggleClass('hide');
}
else
{
if($('.predator.hide').length > 0) {
$('#mixed').removeClass('hide');
$('#predator_only').addClass('hide');
}
else {
$('#mixed').addClass('hide');
$('#predator_only').removeClass('hide');
}
}
});
});
/* For layout only */
div {
display: inline-block;
}
/* Used to hide image */
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is set A:
<div>
<div>
<img src="https://s24.postimg.org/3tsfw9psl/Predator.png" id="predator_only"/>
<img src="https://s24.postimg.org/nn4joz36d/Mixed.png" class="hide" id="mixed"/>
</div>
<div>
<img src="https://s24.postimg.org/ski4a355h/Lion.png" class="predator" />
<img src="https://s24.postimg.org/s2myu8fkl/Deer.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/vxvetx51x/Wolf.png" class="predator"/>
<img src="https://s24.postimg.org/ty9r5e4et/Lamb.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/ll42aq579/Tiger.png" class="predator"/>
<img src="https://s24.postimg.org/f11a4dr6d/Goat.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/flgb72ket/Shark.png" class="predator"/>
<img src="https://s4.postimg.org/rk8v1dv9p/Seal.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/wn9595z9x/Cheetah.png" class="predator"/>
<img src="https://s24.postimg.org/h4bpc1qz9/Gazelle.png" class="hide" />
</div>
</div>
<br><br>
This is set B:
<div>
<div>
<img src="https://s24.postimg.org/3tsfw9psl/Predator.png" id="predator_only2"/>
<img src="https://s24.postimg.org/nn4joz36d/Mixed.png" class="hide" id="mixed2"/>
</div>
<div>
<img src="https://s24.postimg.org/ski4a355h/Lion.png" class="predator2" />
<img src="https://s24.postimg.org/s2myu8fkl/Deer.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/vxvetx51x/Wolf.png" class="predator2"/>
<img src="https://s24.postimg.org/ty9r5e4et/Lamb.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/ll42aq579/Tiger.png" class="predator2"/>
<img src="https://s24.postimg.org/f11a4dr6d/Goat.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/flgb72ket/Shark.png" class="predator2"/>
<img src="https://s4.postimg.org/rk8v1dv9p/Seal.png" class="hide" />
</div>
<div>
<img src="https://s24.postimg.org/wn9595z9x/Cheetah.png" class="predator2"/>
<img src="https://s24.postimg.org/h4bpc1qz9/Gazelle.png" class="hide" />
</div>
</div>

Related

How do i arrange images inside a div?

I am making a project for Uni where I need to upload images to with specified width and height for everyone to see. Its basically equivalent of this: http://www.milliondollarhomepage.com/ . The problems is i have this for the HTML side:
<div id="canvas">
</div>
This is where the pictures are supposed to be uploaded, lets say its size is 1000 x 1000. I am supposed to fit every image there without change its dimensions.
const canvas=document.getElementById('canvas')
const btn = document.getElementById('submit-button');
const image_width=document.getElementById('image_width');
const image_height=document.getElementById('image_height');
btn.addEventListener('click', (event) => {
var x=document.createElement('img');
var color=document.getElementById('color');
if(color.value==='red')
{
x.src='red.png';
}
else if(color.value==='blue')
{
x.src='blue.png';
}
x.width=image_width.value;
x.height=image_height.value
event.preventDefault();
canvas.appendChild(x);
});
This is the Javascript I used, just to see how it works. However when we used different sized images for example we put 3 20x20 and add an 20x40 and finish the rest of the line with 20x20 once i add one more 20x20 it wont start filling the free space to the left of the 20x40, it will start filling to the right of the 20x40.
This is the result.
I wanted the red to fill in the black space left of the blue. Red=50x10 Blue=50x20
What you are trying to do is called a "masonry layout" and they are not very straightforward to implement. It usually requires you to change the flow of your content to run in columns instead of rows.
I'm not even sure that your exact scenario can be accomplished without manual placement, but here is an example of a vertical masonry layout (source: https://codepen.io/iamsaief/pen/jObaoKo):
/* Reset CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background: linear-gradient(45deg, #190f2c, #200b30);
padding: 15px;
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
display: inline-block;
}
/* Main CSS */
.grid-wrapper > div {
display: flex;
justify-content: center;
align-items: center;
}
.grid-wrapper > div > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
.grid-wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
grid-auto-rows: 100px;
grid-auto-flow: dense;
}
.grid-wrapper .wide {
grid-column: span 2;
}
.grid-wrapper .tall {
grid-row: span 2;
}
.grid-wrapper .big {
grid-column: span 2;
grid-row: span 2;
}
<div class="grid-wrapper">
<div>
<img src="https://images.unsplash.com/photo-1541845157-a6d2d100c931?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1588282322673-c31965a75c3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="" />
</div>
<div class="tall">
<img src="https://images.unsplash.com/photo-1588117472013-59bb13edafec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1587588354456-ae376af71a25?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div>
<img src=" https://images.unsplash.com/photo-1558980663-3685c1d673c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=60" alt="" />
</div>
<div class="tall">
<img src="https://images.unsplash.com/photo-1588499756884-d72584d84df5?ixlib=rb-1.2.1&auto=format&fit=crop&w=2134&q=80" alt="" />
</div>
<div class="big">
<img src="https://images.unsplash.com/photo-1588492885706-b8917f06df77?ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1588247866001-68fa8c438dd7?ixlib=rb-1.2.1&auto=format&fit=crop&w=564&q=80" alt="" />
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1586521995568-39abaa0c2311?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div class="big">
<img src="https://images.unsplash.com/photo-1572914857229-37bf6ee8101c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80" alt="" />
</div>
<div class="tall">
<img src="https://images.unsplash.com/photo-1588453862014-cd1a9ad06a12?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1588414734732-660b07304ddb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1588224575346-501f5880ef29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1574798834926-b39501d8eda2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1547234935-80c7145ec969?ixlib=rb-1.2.1&auto=format&fit=crop&w=1353&q=80" alt="" />
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1588263823647-ce3546d42bfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1587732608058-5ccfedd3ea63?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1587897773780-fe72528d5081?ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80" alt="" />
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1588083949404-c4f1ed1323b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1587572236558-a3751c6d42c0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1583542225715-473a32c9b0ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div class="big">
<img src="https://images.unsplash.com/photo-1527928159272-7d012024eb74?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1553984840-b8cbc34f5215?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1433446787703-42d5bf446876?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="" />
</div>
<div class="big">
<img src="https://images.unsplash.com/photo-1541187714594-731deadcd16a?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="" />
</div>
<div class="tall">
<img src="https://images.unsplash.com/photo-1540979388789-6cee28a1cdc9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1421930866250-aa0594cea05c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1355&q=80" alt="" />
</div>
<div>
<img src="https://images.unsplash.com/photo-1493306454986-c8877a09cbeb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1381&q=80" alt="" />
</div>
<div class="wide">
<img src="https://images.unsplash.com/photo-1536466528142-f752ae7bdd0c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="" />
</div>
</div>

MasonryJS image gallery aligns left on page refresh

So I have this image gallery which I displayed as Pinterest-style Masonry by using MasonryJS. Everything works fine but the problem is when I refresh the page. That is, when I refresh the page, all the images align to the left at first then comes to the actual place. It's like for a couple of milliseconds it goes to that position and comes back to life.
Here's a gif which shows the actual problem:
How can I not have it left-aligned in page refresh? I just wish it to stay in the middle no matter how much I refresh the page.
Here's the code:
jQuery(window).on('load', function(){
$('.modal-grid').masonry({
itemSelector: '.modal-grid-item',
gutter: 10,
isFitWidth: true
});
});
.modal-grid{
margin: 0 auto;
margin-top: 30px;
}
.modal-grid-item {
width: 300px; margin-bottom: 10px;
}
.modal-grid-item img {
width: 100%; height: auto;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
<div class="modal-grid">
<div class="modal-grid-item">
<img src="https://i.imgur.com/m7M9EPX.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/NzD7YF9.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/8zvUjul.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/WNmP9VL.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/0nwzhDV.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/ypdixv8.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/1oHOvK1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/kpjtht1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/QAQ0dk6.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/m7M9EPX.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/NzD7YF9.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/8zvUjul.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/WNmP9VL.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/0nwzhDV.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/ypdixv8.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/1oHOvK1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/kpjtht1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/QAQ0dk6.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/m7M9EPX.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/NzD7YF9.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/8zvUjul.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/WNmP9VL.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/0nwzhDV.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/ypdixv8.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/1oHOvK1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/kpjtht1.jpg" />
</div>
<div class="modal-grid-item">
<img src="https://i.imgur.com/QAQ0dk6.jpg" />
</div>
</div>
Masonry has events we can take advantage of, like layoutComplete. I used that to get masonry to load the images while hidden. Once the ready event fires, we trigger Masonry's own layoutComplete event to recalculate the elements. Then we run a callback once to reveal Masonry.
.modal-grid {
opacity: 0; /* jQuery will remove this later */
transition: opacity; /* optional */
}
jQuery(window).on('load', function() {
/* Init your grid like normal but save it to a variable */
const $grid = $('.modal-grid').masonry({
itemSelector: '.modal-grid-item',
gutter: 10,
isFitWidth: true
});
/*
Add a one time eventListener to just run on our hand-made "onLoad" event
*/
$grid.one('layoutComplete', function() {
/* and fade it in */
$grid.css('opacity', '1');
/*
If it is still happening, you can
add a setTimeout to delay the fade effect
*/
/**
let timeoutHandle;
timeoutHandle = setTimeout(function() {
$grid.css('opacity', '1')
// clear the timeout to make explicitly
// sure no extra timers are running
clearTimeout(timeoutHandle);
}, 1000);
*/
});
$(document).ready(function() {
// trigger the event when the document elements
// are ready
$grid.trigger('layoutComplete');
});
});
If you wanna play around with it, you can check out the CodePen here.

How to make a search and filter using javascript

So I am trying to make a Photo filter search. I am able to get to the keyup function but then get stuck on how to search and select the paragraph text. I can not alter the HTML and can only add Javascript.
And what I have so far in my Javascript
window.addEventListener('load', function(e) {
const query = document.querySelector('#filter');
let images = document.querySelector('.thumb-display');
query.addEventListener('keyup', function(e) {
let search = query.value;
for (var i = 0; i < images.length; i++) {
let searchVal = images[i].getElementByTagName('p')[0].innerHTML;
if (searchVal.indexOf(search) > -1) {
images[i].display = "";
} else {
images[i].display = "none";
};
};
});
})// NO CODE OUTSIDE OF HERE
I want to be able to search the (for example) #oceanbeach #mountainroad text and have the images that don't go with the search to be hidden but I can't get it to work.
You can use the input event for the textbox and loop through the p tags to show/hide the .thumb-display.
const txtFilter = document.getElementById('filter');
const lnkReset = document.querySelector('.reset');
const thumbnails = document.querySelectorAll('.thumb-display');
const tagContainers = document.querySelectorAll('.tags');
txtFilter.addEventListener('input', e => {
const filter = e.target.value;
if (filter === '') {
resetFilter();
} else {
// Show the reset link/button.
lnkReset.classList.remove('hidden');
tagContainers.forEach(tagContainer => {
const thumbnail = tagContainer.closest('.thumb-display');
const tags = tagContainer.innerText;
if (tags.indexOf(filter) >= 0) {
thumbnail.classList.remove('hidden');
} else {
thumbnail.classList.add('hidden');
}
});
}
});
lnkReset.addEventListener('click', e => {
e.preventDefault();
resetFilter();
});
function resetFilter() {
thumbnails.forEach(thumbnail => thumbnail.classList.remove('hidden'));
lnkReset.classList.add('hidden');
txtFilter.value = '';
}
body {
font: normal 14px/1.4 sans-serif;
}
img {
background: #eee;
display: inline-block;
height: 100px;
width: 100px;
}
.hidden {
display: none;
}
<nav>
<ul>
<li>
Home
</li>
</ul>
<form class="frm-filter">
<div class="frm-group">
<a class="reset hidden" href="#">Reset</a>
<input class="frm-control" type="text" id="filter" name="filter" placeholder="tag filter" />
</div>
</form>
</nav>
<section class="gallery">
<div class="row">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="thumb-display">
<img />
<p class="tags">#africa #mountain #road</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#palmbeach #distantpeaks</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#oceanbeach #mountainroad</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#lake #clearskies #onthewater</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#fallcolors #bridgecrossing #river</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#fallcolors #slowdown</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#falltrees</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#ontheroad #falldriving</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#mountainflowers #clouds #river</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#mountainlake #retreat</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#stormcoming #thepeak</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#perfectbeach #whitesand</p>
</div>
</div>
</section>
Note that this just checks for the value of the innerText of the p tag.
let images = document.querySelector('.thumb-display');
I think you're looking for .querySelectorAll().
This would be a good place to start:
let images = [ ...document.querySelectorAll('.thumb-display') ];
To select all elements .thumb-display you have to use Document.querySelectorAll()
document.querySelectorAll('.thumb-display')
And then you can do:
const query = document.querySelector('#filter')
const reset = document.querySelector('.reset')
const thumbs = document.querySelectorAll('.thumb-display')
query.addEventListener('keyup', () => thumbs.forEach(t => {
const p = t.querySelector('p')
t.style.display = p.innerText.includes(query.value) ? '' : 'none'
}))
reset.addEventListener('click', (e) => {
e.preventDefault()
query.value = ''
thumbs.forEach(t => t.style.display = '')
})
img {
background: grey;
height: 20px;
width: 60px;
}
<div class="wrapper">
<nav>
<form class="frm-filter">
<div class="frm-group">
<a class="reset hidden" href="#">Reset</a>
<input class="form-control" type="text" id="filter" name="filter" placeholder="tag filter" />
</div>
</form>
</nav>
<section class="gallery">
<div class="row">
<h1>Gallery</h1>
</div>
<div class="row">
<div class="thumb-display">
<img />
<p class="tags">#africa #mountain #road</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#palmbeach #distantpeaks</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#oceanbeach #mountainroad</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#lake #clearskies #onthewater</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#fallcolors #bridgecrossing #river</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#fallcolors #slowdown</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#falltrees</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#ontheroad #falldriving</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#mountainflowers #clouds #river</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#mountainlake #retreat</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#stormcoming #thepeak</p>
</div>
<div class="thumb-display">
<img />
<p class="tags">#perfectbeach #whitesand</p>
</div>
</div>
</section>
</div>

How to make search button to filter gallery images by <p> name

I have an image gallery with title to every image and a input field with search button . when i click the search button i want the images that contain specific character to be displayed and the rest to be hidden and when the input field is empty all the images to be displayed again .
Like if i type "c" all the images with title "TitleCat" to be left and rest hidden.
If i type "title" all the images should be still displayed.
<button id="search" onclick="sortImage()" type="button">
<input type="text" id="inputValue" placeholder="Type to search">
</input>SEARCH
</button>
<div id="Images">
<div id="img">
<img src"....">
<p>TitleCat</p>
</div>
<div id="img">
<img src"....">
<p>TitleDog</p>
</div>
<div id="img">
<img src"....">
<p>TitleCat</p>
</div>
<div id="img">
<img src"....">
<p>TitleDog</p>
</div>
</div>
I will need to create a function sortImage() , but i am not sure how to
approach it.
On Input change, launch a function that look at each p, and apply a class "hide" on each parent of p that not contains your search value, something like that
function searchGallery(data) {
$("#Images p").each(function() {
$(this).parent.toggleClass('hide',!$(this).html().contains(data));
});
}
Decide to make your search CI or not.
First you have to change id="img" to class="img" because ID should be unique. I use contain to filter the result but If you want to act case insensitive you should shift to indexOf using this Q/A.
function sortImage(){
var myfilter=$("#inputValue").val();
$(".img p:not(:contains("+ myfilter +"))").hide();
$(".img p:contains("+ myfilter +")").show();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="search" onclick="sortImage()" type="button">
<input type="text" id="inputValue" placeholder="Type to search">
</input>SEARCH
</button>
<div id="Images">
<div class="img">
<img src"....">
<p>TitleCat</p>
</div>
<div class="img">
<img src"....">
<p>TitleDog</p>
</div>
<div class="img">
<img src"....">
<p>TitleCat</p>
</div>
<div class="img">
<img src"....">
<p>TitleDog</p>
</div>
</div>
Using pure js
function sortImage() {
var p_tags = document.getElementsByTagName("p"); //Get All p Elements
var searchText = document.getElementById('inputValue').value; //Get written in input
if (searchText != "") {
for (var i = 0; i < p_tags.length; i++) { //Loop to check every p content with input value
if (p_tags[i].textContent != searchText) { //if p content not equal input value
p_tags[i].parentElement.style.display = "none"; //Hide Parent
}
}
}
}
and Just simple edit in html code
<input type="text" id="inputValue" placeholder="Type to search">
<button id="search" onclick="sortImage()" type="button">
SEARCH
</button>
a small example how to do a filter search using data-attribute, you can make a full text in your p tags and filter still work.
Html part :
<input type="text" id="inputValue" placeholder="Type to search"></input>
<button id="search" class="filter-button" type="button">
SEARCH
</button>
<div id="galory">
<div id="img" data-filter="TitleCat">
<img src"....">
<p>TitleCat</p>
</div>
<div id="img" data-filter="TitleDog">
<img src"....">
<p>TitleDog</p>
</div>
<div id="img" data-filter="TitleCat">
<img src"....">
<p>TitleCat</p>
</div>
<div id="img" data-filter="TitleDog">
<img src"....">
<p>TitleDog</p>
</div>
</div>
Jquery part:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$(".filter-button").click(function () {
var value = $('#inputValue').val();
$('#galory')
.children()
.filter(function () {
return $(this).data('filter') != value;
})
.hide();
});
});
</script>
First of all the attribute id must be unique in a document, you can use class instead.
You can try with :not() and :contains() like the following way:
function sortImage(){
$('.img').show(); // show all
var v = $('#inputValue').val().trim().toUpperCase();
$('.img > p:not(:contains('+ v +'))').closest('.img').hide(); // hide those does not contain the value
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="search" onclick="sortImage()" type="button">
<input type="text" id="inputValue" placeholder="Type to search"/>SEARCH
</button>
<div id="Images">
<div class="img">
<img src="....">
<p>TitleCat</p>
</div>
<div class="img">
<img src="....">
<p>TitleDog</p>
</div>
<div class="img">
<img src="....">
<p>TitleCat</p>
</div>
<div class="img">
<img src="....">
<p>TitleDog</p>
</div>
</div>
Even better without the search button using input event:
$('#inputValue').on('input',function(){
$('.img').show(); // show all
var v = $('#inputValue').val().trim().toUpperCase();
$('.img > p:not(:contains('+ v +'))').closest('.img').hide(); // hide those does not contain the value
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="inputValue" placeholder="Type to search"/>
<div id="Images">
<div class="img">
<img src="....">
<p>TitleCat</p>
</div>
<div class="img">
<img src="....">
<p>TitleDog</p>
</div>
<div class="img">
<img src="....">
<p>TitleCat</p>
</div>
<div class="img">
<img src="....">
<p>TitleDog</p>
</div>
</div>
Case insensitive search
$(document).on('click', '#search', function(e){
var myfilter=$("#inputValue").val().toLowerCase();
$(".img p").hide();
// for case insensitive
$('.img p').each(function(i){
if($(this).text().toLowerCase().indexOf(myfilter) != -1) {
$(this).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="search" type="button">
<input type="text" id="inputValue" placeholder="Type to search">
</input>SEARCH
</button>
<div id="Images">
<div class="img">
<img src"....">
<p>TitleCat</p>
</div>
<div class="img">
<img src"....">
<p>TitleDog</p>
</div>
<div class="img">
<img src"....">
<p>TitleCat</p>
</div>
<div class="img">
<img src"....">
<p>TitleDog</p>
</div>
</div>

How to lazy load a wrapper div containing a carousel with images?

I have a bunch of carousels each wrapped in .lazy_wrap. I would like to lazy load them to load the site faster. How would I approach this? I've looked at some lazy load plugins but they seem to only work on images. I found a plugin called jquery-lazyloadanything but I can't figure out how to use it.
http://jsfiddle.net/8bJUc/667/
<div class="lazy_wrap">
<div class="owl-carousel">
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
<div>
<img src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
</div>
</div>
</div>
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
navigation: true,
pagination: true
});
});
http://jsfiddle.net/8bJUc/668/
You need to add just this code:
$('img').lazyloadanything({
'onLoad': function(e, LLobj) {
var $img = LLobj.$element;
var src = $img.attr('data-src');
$img.attr('src', src);
console.log("loading: ", src);
}
});
But you don't want the images to get loaded "automatically", so you'll need to change src="url" to data-src="url" on each img tag, like:
<img data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
You'll also need to add height, width to the images either via the html tag or css, because lazyloadanything only loads them when it detects that they enter the screen but it can only happen when they have a size.

Categories