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.
Related
Time ago I had a header implemented with a Bootstrap carousel: You know, something like this:
<div class="carousel">
<div class="item"><img src="pic1.jpg"></div>
<div class="item"><img src="pic2.jpg"></div>
</div>
Pay attention to that link on "pic2.jpg", this will be fun...
Recently, I have been asked to use <picture> elements, so now it is posible to display images for mobile devices:
<div class="item">
<picture>
<source media="(max-width: 576px)" srcset="pic1-small.jpg">
<img src="pic1.jpg">
</picture>
</div>
<div class="item">
<picture>
<source media="(max-width: 576px)" srcset="pic2-small.jpg">
<img src="pic2.jpg">
</picture>
</div>
And here is the tricky question: I need to add a link only in the mobile image (pic2-small.jpg).
(Well, in fact could be links on every image, or none at all, only in the mobile image, only in the desktop image... This is managed by the administrator user)
So, I can't do this because the link should be only for pic2-small, not pic2:
<div class="item">
<a href="example.com">
<picture>
<source media="(max-width: 576px)" srcset="pic2-small.jpg">
<img src="pic2.jpg">
</picture>
</a>
</div>
What I did is this:
<div class="item" onclick="header_onclick(this)">
<picture>
<source media="(max-width: 576px)" srcset="pic2-small.jpg?target=pic2-small-link">
<img src="pic2.jpg">
</picture>
<a id="pic2-small-link" href="example.com" style="display: none"></a>
</div>
<script>
function header_onclick(carousel_item)
{
var current_src = carousel_item.querySelector("img").currentSrc;
if (typeof current_src === "undefined") {
return;
}
var src_parts = current_src.split("?target=");
if (src_parts.length < 2) {
return;
}
var link = document.getElementById(src_parts[1]);
if (link) {
link.click();
}
}
</script>
An onclick event in the carousel item and a javascript function.
A target value in the URL of the image.
A hidden <a> with the destination URL.
The magic is in this line:
var current_src = carousel_item.querySelector("img").currentSrc;
currentSrc has the URL of the image that the browser is currently showing according to the screen size. So, from that URL I take the target parameter and use it to get the corresponding link and then execute it.
All this is working, but I feel it too hacky for my taste. I'm not very experienced with the <picture> element, so my question is: this could be resolved in a better way?
I have a jQuery slider that I wrote in jQuery in WordPress site.
I want to enable it to play video if the src extension is "mp4".
Any ideas?
Here is an example of the HTML generated: (please note the first img src is a link to a video)
I would like to enable the visitor click play button to start the video.
<div id="img-container" style="width: 2828.1px; padding-right: 886px;">
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2015/12/VideoClip.mp4" height="1080" width="842" alt="" title="" style="height: 414px; width: 323px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2017/03/railings.png" height="612" width="600" alt="" title="" style="height: 414px; width: 230px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div class="picture_holder">
<div class="picture">
<img src="/wp-content/uploads/2017/03/railing-1.png" height="600" width="462" alt="" title="" style="height: 414px; width: 177px;">
<h4 class="captioning"><br><span class="rtl"></span></h4>
</div>
</div>
<div style="clear: left;"></div>
</div>
Here is the code I was looking for: (will replace every mp4 link with video tag):
$('.picture_holder .picture > img').each(function(index){
console.log("index="+index+" Video src = "+ $(this).attr('src') + "<<<");
let imgsrc = $(this).attr('src');
if (imgsrc.indexOf(".mp4") >0) {
console.log("want to replace");
$(this).parent().prepend('<video width="320" height="600" controls><source src="'+imgsrc+'" type="video/mp4"></video>');
$(this).remove();
}
});
It replaces the img element with video element.
I use parent().prepend() simply because replaceWith() is not working here.
Few fixes are still missing to place it correctly, but it works.
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/