I have the following JavaScript function where I am counting the total divs with a classname, but not all must be changed, that is specified with the amount param. So there are 4 classes, so the each counts the classes and then the for loop changes them according to the amount param.
Yet this doesn't seem to work, see commented out version too -
function changeImages(change, amount) {
var $projImg = $('.proj-img');
$.each($projImg, function(i) {
$(this).attr('src', 'src/img/' + change + 'Slide' + (i + 1) + '.png');
});
// $.each($projImg, function (j) {
// for(var i = 0; i < amount; i++){
// $(this).attr('src', 'src/img/' + change + 'Slide' + (i) + '.png');
// }
// });
}
You could use an array and then slice it so that it contains no more than the amount number of elements, no jQuery required:
function changeImages(change, amount) {
const projImgs = [...document.querySelectorAll('.proj-img')]
.slice(0, amount);
projImgs.forEach((img, i) => {
img.src = 'src/img/' + change + 'Slide' + (i + 1) + '.png';
});
}
Use the :lt() selector
var amount = 5,change = '';
$('.proj-img:lt('+amount+')').map(function(i,el){
$(el).attr('src', 'src/img/' + change + 'Slide' + (i + 1) + '.png');
});
console.log($('.proj-img'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
<img src="" alt="" class="proj-img">
Just use jQuery's .slice():
function changeImages(amount) {
const $matches = $('.foo').slice(0, amount);
$matches.addClass('bar');
}
changeImages(10);
.foo {
border-bottom: 8px solid red;
}
.bar {
border-color: cyan;
}
.foo:hover {
border-color: black;
}
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Your JS code would then look like this:
function changeImages(change, amount) {
$('img').slice(0, amount).each((i, el) => {
el.setAttribute('src', `https://place-hold.it/200x200&text=${ change }-${ i + 1 }`);
});
}
changeImages('UPDATED', 3);
body {
margin: 0;
}
img {
float: left;
max-width: 20vw;
}
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<img src="https://place-hold.it/200x200&text=DEFAULT" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Also, regarding :lt(), keep in mind that's not part of the CSS specification, as stated in the docs:
Because :lt() is a jQuery extension and not part of the CSS specification, queries using :lt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(0, index) instead.
Related
I would like to create in jQuery a "wall" of logo like on the https://www.squarespace.com/ website at the "TRUSTED BY THE WORLD’S BEST" section.
The same thing : 8 logos with fade-in fade-out.
Can I have some help please ?
<div class="client-logos-grid">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
I begin with this : https://jsfiddle.net/vc43mzxL/1/
$('document').ready(function() {
var curIndex = 0;
var src = ['http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg', 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg', 'http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 5000;
$(document).ready(function() {
switchImageAndWait(true);
});
function switchImageAndWait(fadeOut2) {
if (fadeOut2) {
setTimeout(fadeOut, waitTimeInMilliseconds);
} else {
var index = Math.floor((Math.random() * src.length))
if (curIndex == index) {
index++;
if (index >= src.length) {
index -= 8;
}
}
curIndex = index;
$(".client-logo img").attr("src", src[index]);
fadeIn();
}
}
function fadeOut() {
$(".client-logo img").fadeTo(fadeTimeInMilliseconds, 0, function() {
switchImageAndWait(false);
});
}
function fadeIn() {
$(".client-logo img").fadeTo(fadeTimeInMilliseconds, 1, function() {
switchImageAndWait(true);
});
}
});
$(function() {
//calling every 20 millseconds
setInterval(function() {
changeLogo();
}, 200);
});
function changeLogo() {
//taking first active logo
var shownLogo = $(".client-logos-grid").find('.client-logo:not(.hidden)');
var shownLogo = $(".client-logos-grid").find('.client-logo:not(.hidden)');
shownLogo.fadeOut(200, function() {
shownLogo.addClass('hidden');
//check if its the last logo in the row
if (shownLogo.next('.client-logo').length > 0) { // not last
shownLogo.next('.client-logo').fadeIn(400, function() {
shownLogo.next('.client-logo').removeClass('hidden');
});
} else { // last
//move to first
$('.client-logo:first').fadeIn(400, function() {
$('.client-logo:first').removeClass('hidden');
});
}
});
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="client-logos-grid">
<img src="" alt="">A
<img src="" alt="">B
<img src="" alt="">C
<img src="" alt="">D
<img src="" alt="">E
<img src="" alt="">F
<img src="" alt="">G
<img src="" alt="">H
</div>
Are you looking for something like this?
i inspect their web and they use their custom js to animate the logo transition.
you can also do this by using simplefadeslideshow
<div id="slideshow">
<li><img src="images/4.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the last image in the slideshow -->
<li><img src="images/3.jpg" width="640" height="480" border="0" alt="" /></li>
<li><img src="images/2.jpg" width="640" height="480" border="0" alt="" /></li>
<li><img src="images/1.jpg" width="640" height="480" border="0" alt="" /></li> <!-- This is the first image in the slideshow -->
</div>
and bind the plugin to the HTML structure you have created
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
the demo web can be seen here hope this helps
I'm learning to make image gallery and when i click on thumbnail, it does nothing. Bellow is my code, I'm trying for some tome to make it work, can I get some help ?
HTML :
<script src="galerijaSlika.js"></script>
<img id="glavnaSlika" src="Slike/infogamer_galerija/info1.jpg">
<div id="sveSlike" onClick="promjeniSliku(event)">
<img src="Slike/infogamer_galerija/info1.jpg">
<img src="Slike/infogamer_galerija/info2.jpg">
<img src="Slike/infogamer_galerija/info3.jpg">
<img src="Slike/infogamer_galerija/info4.jpg">
<img src="Slike/infogamer_galerija/info5.jpg">
<img src="Slike/infogamer_galerija/info6.jpg">
<img src="Slike/infogamer_galerija/info7.jpg">
<img src="Slike/infogamer_galerija/info8.jpg">
<img src="Slike/infogamer_galerija/info9.jpg">
<img src="Slike/infogamer_galerija/info10.jpg">
<img src="Slike/infogamer_galerija/info11.jpg">
<img src="Slike/infogamer_galerija/info12.jpg">
</div>
Javascript :
function promjeniSliku(event){
event = event || window.event;
var trazeniElement = event.target || event.srcElement;
if(trazeniElement == "IMG"){
document.getElementById("glavnaSlika").src = trazeniElement.getAttribute("src");
}
}
Your typo is:
if(trazeniElement == "IMG"){
The correct test must be:
if (trazeniElement.tagName == "IMG") {
For details see MDN
function promjeniSliku(event){
event = event || window.event;
var trazeniElement = event.target || event.srcElement;
if (trazeniElement.tagName == "IMG") {
document.getElementById("glavnaSlika").src = trazeniElement.getAttribute("src");
}
}
<img id="glavnaSlika" src="Slike/infogamer_galerija/info1.jpg">
<div id="sveSlike" onClick="promjeniSliku(event)">
<img src="Slike/infogamer_galerija/info1.jpg">
<img src="Slike/infogamer_galerija/info2.jpg">
<img src="Slike/infogamer_galerija/info3.jpg">
<img src="Slike/infogamer_galerija/info4.jpg">
<img src="Slike/infogamer_galerija/info5.jpg">
<img src="Slike/infogamer_galerija/info6.jpg">
<img src="Slike/infogamer_galerija/info7.jpg">
<img src="Slike/infogamer_galerija/info8.jpg">
<img src="Slike/infogamer_galerija/info9.jpg">
<img src="Slike/infogamer_galerija/info10.jpg">
<img src="Slike/infogamer_galerija/info11.jpg">
<img src="Slike/infogamer_galerija/info12.jpg">
</div>
I got this working. I had to change the images around, and to get a larger item in the galeria image I had to do a string replace, feel free to delete that part.
function promjeniSliku(event) {
var target = event.target;
if (target.tagName == 'IMG') {
var src = target.src.replace(/100/g, '500');
document.getElementById('glavnaSlika').src = src;
}
}
<img id="glavnaSlika" src="//lorempixel.com/500/500/cats/1">
<div id="sveSlike" onclick="promjeniSliku(event)">
<img src="//lorempixel.com/100/100/cats/1" alt="" />
<img src="//lorempixel.com/100/100/cats/2" alt="" />
<img src="//lorempixel.com/100/100/cats/3" alt="" />
<img src="//lorempixel.com/100/100/cats/4" alt="" />
<img src="//lorempixel.com/100/100/cats/5" alt="" />
<img src="//lorempixel.com/100/100/cats/6" alt="" />
<img src="//lorempixel.com/100/100/cats/7" alt="" />
<img src="//lorempixel.com/100/100/cats/8" alt="" />
<img src="//lorempixel.com/100/100/cats/9" alt="" />
<img src="//lorempixel.com/100/100/cats/10" alt="" />
<img src="//lorempixel.com/100/100/cats/11" alt="" />
<img src="//lorempixel.com/100/100/cats/12" alt="" />
</div>
Goal: When image A is clicked that same image appears at the bottom of the page. Needs to work for more than one image.
When image A is clicked I need image B to now have the same src as image A.
Or to Generate a copy of the clicked image.
This should also be able to work for several pictures.
So for example if I clicked 5 images (Image A-01, A-02, A-03, A-04, A-05) on the screen....
At the bottom of the page there should be those 5 images
I've tried
HTML:
<img id="myImage" src="http://placehold.it/150">
<img id="new" src="http://placehold.it/200">
JS
$(function(){
$("#myImage").click(function() {
$("#new").attr("src","http://placehold.it/150")
});
});
Which works to replace one image but I need the same code to work for multiple image clicks.
Another proposal with an event listener.
var imgCount = 5,
i;
for (i = 1; i <= 5; i++) {
document.getElementById('img' + i).addEventListener('click', setImg('img' + i), false);
}
function setImg(id) {
return function () {
var img = document.createElement('img');
if (imgCount) {
imgCount--;
img.src = document.getElementById(id).src;
document.getElementById('footer').appendChild(img);
};
}
}
<img id="img1" src="http://lorempixel.com/200/100/city/1" />
<img id="img2" src="http://lorempixel.com/200/100/city/2" />
<img id="img3" src="http://lorempixel.com/200/100/city/3" />
<img id="img4" src="http://lorempixel.com/200/100/city/4" />
<img id="img5" src="http://lorempixel.com/200/100/city/5" />
<div id="footer"></div>
This will help you out
function changeSrc(id){
document.getElementById('footer').src = document.getElementById(id).src;
}
<img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200" width="auto" id="img1" onclick="changeSrc(this.id)"/>
<img src="https://images-eu.ssl-images-amazon.com/images/G/02/uk-electronics/product_content/Nikon/ECS-NK1308141-B00ECGX8FM-2L-1024w683q85s10-BKEH_London_Paris__0316.jpg" height="200" width="auto" id="img2" class="image" onclick="changeSrc(this.id)"/>
<img src="" height="200" width="auto" id="footer" class="image" />
Try this:
<img src="https://randomuser.me/api/portraits/thumb/men/57.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/14.jpg" class="a">
<img src="https://randomuser.me/api/portraits/thumb/women/7.jpg" class="a">
<br>
<div id="sectionB">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
<img src="http://placehold.it/48" class="b">
</div>
<br>
<button id="reset">Reset</button>
===
$(function() {
$('.a').click(function() {
var img = $(this).attr('src');
var index = $(this).index();
$('.b').eq(index).attr('src', img);
})
$('#reset').click(function(){
$('.b').attr('src', 'http://placehold.it/48');
})
})
DEMO: https://jsfiddle.net/j359yfor/
can anyone help me about my problem.
i have a 5 images (which is set in a specific position) with the use of bootstrap then i want it to have an animation to be specific a FADE animation on page load here's my mark up and js and its working properly but I want my image to show randomly can anyone help me.
$(function () {
$('#fds img').each(function (i) {
$(this).delay((i++) * 1000).fadeTo(2000, 1);
})
});
<div id="fds">
<div class="col-md-12 margin-b-2" style="padding-left: 0; padding-top: 20px">
<div class="com-sm-6 col-md-3">
<img id="img1" class="thumbnail" src="../img/1.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg1();" />
</div>
<div class="com-sm-6 col-md-3">
<img id="img2" class="thumbnail" src="../img/2.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg2();" />
</div>
<div class="com-sm-6 col-md-3">
<img id="img3" class="thumbnail" src="../img/3.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg3();" />
</div>
<div class="com-sm-6 col-md-3">
<img id="img4" class="thumbnail" src="../img/4.jpg" alt="Alternate Text" height="300" width="330" onclick="javascript:modalImg4();" />
</div>
</div>
<div class="col-md-12">
<img id="img5" class="thumbnail" src="../img/5.png" alt="Alternate Text" style="padding-left: 10px; padding-right: 10px" height="300" width="1350" onclick="javascript:modalImg5();" />
</div>
</div>
$(function() {
function Shuffle(o) {
for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}; //stole...borrowed from CSS tricks!
rand = [];
$('#fds img').each(function(i) {
rand.push(i);
})
Shuffle(rand);
for (i = 0; i < rand.length; i++) {
$('#fds img').eq(rand[i]).delay(i * 1000).fadeTo(2000, 1);
}
});
Demo: http://jsfiddle.net/rdc47yqL/
So, process is: get indexes of images, place them in array, randomize/shuffle array),iterate through randomized array,
and target images by using eq() selector.
I'm trying to use the existing href value as my target in manipulating the css. Unfortunately, I can't seem to make it work. I need a little assistance where did I go wrong.
$(function(){
$('.tab-items a').each(function(){
var target_ids = $(this).attr('href').toLowerCase();;
var target_image =$(target_ids).find('a:first img').attr('src');
$(this).css('background' 'url("'+ target_image +'")');
})
})
.tab-items a {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 5px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-items">
<li>
Nature
People
Animals
</li>
</ul>
<div>
<div id="nature_231">
<img src="http://lorempixel.com/400/200/nature/1" alt="" />
<img src="http://lorempixel.com/400/200/nature/2" alt="" />
<img src="http://lorempixel.com/400/200/nature/3" alt="" />
</div>
<div id="#people_541">
<img src="http://lorempixel.com/400/200/people/1" alt="" />
<img src="http://lorempixel.com/400/200/people/2" alt="" />
<img src="http://lorempixel.com/400/200/people/3" alt="" />
</div>
<div id="#animals_961">
<img src="http://lorempixel.com/400/200/animals/1" alt="" />
<img src="http://lorempixel.com/400/200/animals/2" alt="" />
<img src="http://lorempixel.com/400/200/animals/3" alt="" />
</div>
</div>
See out put ,Working Fine
You are missing comma separator in argument to css()
$(function(){
$('.tab-items a').each(function(){
var target_ids = $(this).attr('href').toLowerCase();;
console.log(target_ids)
var target_image =$(target_ids).find('a:first img').attr('src');
console.log(target_image)
$(this).css('background', 'url("'+ target_image +'")');
})
})
.tab-items a {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 5px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-items">
<li>
Nature
People
Animals
</li>
</ul>
<div>
<div id="nature_231">
<img src="http://lorempixel.com/400/200/nature/1" alt="" />
<img src="http://lorempixel.com/400/200/nature/2" alt="" />
<img src="http://lorempixel.com/400/200/nature/3" alt="" />
</div>
<div id="#people_541">
<img src="http://lorempixel.com/400/200/people/1" alt="" />
<img src="http://lorempixel.com/400/200/people/2" alt="" />
<img src="http://lorempixel.com/400/200/people/3" alt="" />
</div>
<div id="#animals_961">
<img src="http://lorempixel.com/400/200/animals/1" alt="" />
<img src="http://lorempixel.com/400/200/animals/2" alt="" />
<img src="http://lorempixel.com/400/200/animals/3" alt="" />
</div>
</div>
IDK about JQuery,
But in Javascript, I would just iterate through an array of 'a' tags searching for the proper href, like this, you could even make it a function to ID your href:
var matchHref = function(input) {
var a = document.getElementsByTagName('a'), href, target;
for(var i = 0, j = a.length; i < j; ++i) {
href = a[i].getAttribute('href');
if(href === input){
target = a[i];
}
}
return target;
}
Then you could just do this to call it:
matchHref('href-name').style.whatever-you-change;