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
Related
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.
I have a bit of a problem with a gallery.
I'm trying to fit images & videos in a row and have them keep an equal height.
I could achieve that with the following code but only in the case of a row full of images. If I try to place a video, it doesn't work...
var videos = document.querySelector('.gallery-video');
$(".img-row").each(function () {
var row = $(this),
rowItems = row.find(".gallery-item"),
totalMarginSpace = (4 * (rowItems.length - 1)),
itemsWidthSum = 0,
diff,
rowItem,
rowItemWidth;
videos.addEventListener('loadeddata', function() {
rowItems.height(1000);
for(var i = 0 ; i < rowItems.length ; i++) {
rowItem = rowItems[i];
rowItemWidth = $(rowItem).outerWidth();
itemsWidthSum += rowItemWidth;
}
if(rowItems.length >= 3) {
diff = (row.width() - totalMarginSpace) / itemsWidthSum;
rowItems.height(999 * diff);
} else {
rowItems.height(250);
}
}, false);
});
Here's my HTML :
<section class="gallery-section">
<div class="img-row">
<video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
<source src="" type="video/mp4">
</video>
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
<source src="" type="video/mp4">
</video>
<img class="gallery-item" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item margot" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item" src="" alt="" />
<img class="gallery-item margot" src="" alt="" />
</div>
<div class="img-row">
<img class="gallery-item margot" src="" alt="" />
</div>
Any ideas on how to get my code to work ?
Thank you !
Code updated : I replaced item.width by item.offsetWidth (as width return nothing with videos).. It's a bit better but now the rows containing the videos are smaller than the one without.
Solution found ! Thanks for all your help but I really wanted to use JS to resolve my problem.
Ok so it did come from the videos because they were not completely loaded yet. So I added an eventlistener. I updated my code in case anyone wants to use it.
Try making a table
<table>
<tr>
<th>your imgs</th>
<th>your videos</th>
...
</tr>
</table>
then try to adjust the table with responsive CSS with this tutorial. I don't know if I understood your problem but I 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/
I need to pass the 2 variables(nextimage, previmage) in this function
$("a.lightbox").click(function abc(e) {
var nextimage = $(this).parent().next().children('a').attr('href');
var previmage = $(this).parent().prev().children('a').attr('href');
return nextimage;
return previmage;
});
They should be passed to this function like
function nextimage(){
$('<img src="nextimage"/>')
}
Any help will be greatly appreciated
I think this is what you are looking for..
$("a.lightbox").click(function(e) {
var nextimage = $(this).parent().next().children('a').attr('href');
var previmage = $(this).parent().prev().children('a').attr('href');
nextimage(nextimage, previmage);
});
function nextimage(nextimage, previmage){
$('<img src="nextimage"/>')
}
Though the function call may not be necessary...depending on your application.
I got better solution. Check this:
Ref: Previous Question
<div>
<ul class="listing">
<li><img src="thumbs/eli_t.jpg" width="150" height="100" class="images" /></li>
<li><img src="thumbs/ggallin_t.jpg" width="150" height="100" class="images" /></li>
<li><img src="thumbs/jontarata_t.jpg" width="150" height="100" class="images" /></li>
<li><img src="thumbs/macka s tatuirovki_t.jpg" width="150" height="100" class="images" /></li>
<li><img src="thumbs/mk7_t.jpg" width="150" height="100" class="images" /></li>
<li><img src="thumbs/P5010345_t.jpg" width="150" height="100" class="images" /></li>
</ul>
<a id="prev">Prev</a>
<a id="next">Next</a>
</div>
<img id="currentImage"></img>
<script type="text/javascript">
(function() {
var index = 0;
var showImage = function(i) {
var url = $("ul.listing a").eq(i).attr("href");
$("#currentImage").attr("src", url);
index = i;
};
$("#prev").click(function() {
showImage(index - 1);
});
$("#next").click(function() {
showImage(index + 1);
});
$("ul.listing a").click(function() { var i = $(this).index(); showImage(i); });
})();
</script>