...but for some reason it won't work. Beginner here, so if someone could explain what I'm doing wrong, I'd really appreciate it. xD
http://codepen.io/DylanEspey/pen/xgwJr An example Codepen I threw together really quick to try to illustrate my problem.
I hate that I've had to ask so many questions, but this is my first project where I've kind of had my own leeway, and I've been struggling to get it done before deadlines so I can impress people. xD That and college has made my schedule a mess, so I've been making really dumb mistakes. That, and I just started learning Javascript a few weeks ago...
The problem is that the overlay used for your fade effect is preventing you from clicking on the image which is underneath it. The solution is to, instead of listening for a click on the image, listen for it on the overlay, and adjust the references accordingly.
I have forked your codepen to reflect this: http://codepen.io/anon/pen/qlkob
JS:
$(document).ready(function() {
$('.thumbnails .overlay').click(function() {
var img = $(this).find('img')[0];
var thmb = img;
var src = img.src;
$('.project-img img').fadeOut(400,function(){
thmb.src = this.src;
$(this).attr('src', src).fadeIn(400);
});
});
});
Try this:
$('.thumbnails img').click(function () {
var thmb = this;
var src = this.src;
$('.project-img img').fadeOut(400, function () {
thmb.src = this.src;
$(this).attr('src', src).fadeIn(400);
});
});
Fiddle Demo
Related
I have a probelm, i have created a custom theme on Shopify and do all my stuff, but now i need to open some phots in a lightbox, i have noticed that if images are not processed the lightbox work, the problem is that shopify process all images and add at the end of url of images other piece of url, for example "myimage.png" became "myimage.png?v=4234324" and thats way its not working, how can i "say" to ignore all what came after .png and no matter whats is, just put into lightbox??
This is code:
`window.addEventListener('load', function() {
document.querySelectorAll('img[src$=".png"], img[src$=".jpeg"], img[src$=".webp"], img[src$=".jpg"]').forEach(function(img) {
img.addEventListener('click', function() {
var lightbox = document.createElement('div');
lightbox.id = 'lightbox';
document.body.appendChild(lightbox);
var imgElement = document.createElement('img');
var src = this.src.split('?')[0];
imgElement.src = src;
lightbox.appendChild(imgElement);
lightbox.addEventListener('click', function() {
lightbox.parentNode.removeChild(lightbox);
});
});
});
});`
thx in advance, im going crazy
i have tried also to put like this img[src$=".webp?v"] or the full url of image, but nothing
There is a changing visual usage when hovering over the text in the information in the link. How can we do this using only javascript? I don't want to use jquery.
Link: https://jimfahaddigital.com/tutorial/click-text-to-change-image-using-elementor-wordpress-elementor-pro-tutorial/
jquery code used
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
//No Youtube Remake using this Snippet without Permission
//Copyrighted by Jim Fahad
var $ = jQuery
$(document).ready(function(){
$('[data-showme]').hover( function(){
event.preventDefault();
var showme = $(this).attr('data-showme')
$('.all-img').hide()
$('.' + showme).show()
})
})
</script>
I don't want to use jquery. How can I do this with javascript only?
I tried various javascript methods but I was not successful.
You should always read the rules first, but I used to make the same mistake. It would be far better to simply Google it and try harder, and you should only come here as a last resort. Here I give you this little snippet, hope it helps.
function showHide(arg) {
let img = document.querySelector('[data-test="img"]');
if(arg === "show"){
img.style.display = 'block';
}else{
img.style.display = 'none';
}
}
showHide('hide');
<div onmouseenter="showHide('show')" onmouseleave="showHide('hide')">
some text
</div>
<img data-test="img" src="https://i.stack.imgur.com/bLgx6.png?s=64&g=1" alt="">
Hi all you JavaScript/jquery gurus out there.
I hope someone is able to help me since I am pretty much stuck trying to combine MagnificPopup with ElevateZoom.
I am able to get ElevateZoom to work if there is only one image. But in gallery mode (several images) then it fails badly.
Here is an example of it working with one image.
You can see the image behind the popup. If there are several images it does not Work.
I have made a few changes to magnificpopup.js :
In "open: function(data){..."
I have added
$(".mfp-img").elevateZoom();
just before
return data;
In "getImage: function (item, template) {..."
I have added
var att = document.createAttribute('data-zoom-image');
att.value = item.src;
img.setAttributeNode(att);
just before
item.img = $(img).on('load.mfploader', onLoadComplete).on('error.mfploader', onLoadError);
img.src = item.src;
This Works well but only with one image. As soon as there are more it fails. Unfortunately I am not able to figure out the modification needed myself. Any help will be highly appreciated.
Best regards
Nicki
I figured it out!
Instead of the code i added above, I did the following:
In "getImage: function (item, template) {..."
Just before
_mfpTrigger('ImageLoadComplete');
I have added
$("#" + item.img[0].id).elevateZoom();
In "close: function () {..."
Just before
mfp.isOpen = false;
I have added
$('.zoomContainer').remove();
In "getImage: function (item, template) {..."
I have added
img.id = item.el[0].id;
var att = document.createAttribute('data-zoom-image');
att.value = item.src;
img.setAttributeNode(att);
just before
item.img = $(img).on('load.mfploader', onLoadComplete).on('error.mfploader', onLoadError);
img.src = item.src;
Now everything Works regardless of the number of images used.
Best regards
thank you for this walkthrough!
I would suggest to add the
$('.zoomContainer').remove();
also at the beginning of "getImage: function (item, template) {...",
so there is only one zoomContainer, when you slide through several images.
Hi there, I would like to build an image gallery with pure javascript and found a quite good approach http://www.trans4mind.com/personal_development/JavaScript/imageSlideShow.htm.
However, it does not work as expected. Even though I managed to link my Next / Back buttons to switch the images in the array the second image would only appears for a fraction of a second before reverting back to the initial image.
Is there anything messed up in the js?
currentIndex = 0;
MyImages = new Array();
MyImages[0] ="images/sampleimage.jpg";
MyImages[1] ="images/kuh.jpg";
function preload()
{
for (var i=0;i<MyImages.length;i++){
var imagesPreloaded = new Image();
imagesPreloaded.src = MyImages[i];
}
}
preload();
function Nexter(){
if (currentIndex<MyImages.length-1){
currentIndex=currentIndex+1;
document.theImage.src=MyImages[currentIndex];
}
else {
currentIndex=0;
document.theImage.src=MyImages[currentIndex];
}
}
function Backer(){
if (currentIndex>0){
currentIndex=currentIndex-1;
document.theImage.src=MyImages[currentIndex];
}
else {
currentIndex=1;
document.theImage.src=MyImages[currentIndex];
}
}
$("#nav_left").on("click",function(){
Nexter();
});
$("#nav_right").on("click",function(){
Backer();
});
//
//img Gallery
//
$(".gallery_nav img").on("mouseover", function (){
$(this).css("opacity", 0.8);
});
$(".gallery_nav img").on("mouseleave", function (){
$(this).css("opacity", 0.1);
});
Thanks for any useful hints. And BTW: Firebug tells me the following in the console:
Image corrupt or truncated:
Finally, the code above is the maximum extent of js I can deal with at the moment regarding my current level of knowledge and expertise. So please consider this when answering
It looks like the markup of your our link tags () is jacking up or possibly reloading the page - which would reset the gallery back to image #1. Try adding a # to the href attribute of your link markup (to denote them as anchors) or just flat out change them to tags
Example
<img src="images/pfeil_links.svg" alt="First image">
here is an altered JSFiddle that seems to work okay
http://jsfiddle.net/Nf7yR/1/
And here is a version that uses spans; to the same effect:
http://jsfiddle.net/Nf7yR/2/
I hope somebody could help me out with this.
I'm working on a portfolio website that currently looks like this:
http://cargocollective.com/shap
As you can see, I have a png image over 15 animated gif thumbnails.
Basically, I want to have some short gif animations popping into some of the screens from a time to time, so what i'm trying to do is to have a script that replaces some of the gifs with others, either randomly OR after a certain amount of time.
I hope that someone can understand what i mean and help me.
__________ *UPDATE*:
Thanks a lot, I really appreciate the help. I'm sorry for the lack of knowladge I have, making it hard for me to use what you just wrote there, but this is what I added to my source code:
<script type="text/javascript">
$(document).ready(function() { changer(); });
function changer() {
var imgnum = Math.floor(15*Math.random());
var time = Math.floor(5000*Math.random());
var $img = $("img").eq(imgnum);
if ($img.attr("src")=="http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif")
$img.attr("src","http://payload.cargocollective.com/1/1/39798/479849/prt_166x132_1314132538.gif");
else
$img.attr("src","http://payload.cargocollective.com/1/1/39798/479556/prt_166x132_1314132436.gif");
setTimeout(changer,time);
}
</script>
I just copied the URL of 2 of my gif thumbnails and added them to the script, is that absolutely wrong?
Maybe the fact that I'm using the cargocollective system makes things complicated.
Here is what it looks like right now, as you can see, something IS happening, but I can't really control it:
http://cargocollective.com/shap
(after a minute the png overlay is gone for whatever reason)
best,
s
Tube televisions! How wonderfully quaint. ;-)
Well, here's something I tossed together. Obviously you should change the actual image SRCs into something that exists on your server.
http://jsfiddle.net/9KrsV/1/
$(function() { changer(); });
function changer() {
var imgnum = Math.floor(15*Math.random());
var time = Math.floor(5000*Math.random());
var $img = $("img").eq(imgnum);
if ($img.attr("src")=="images/chalk-dotted.png")
$img.attr("src","images/chalk-box.png");
else
$img.attr("src","images/chalk-dotted.png");
setTimeout(changer,time);
}
UPDATE: Obviously, this is pretty narrow. Here's another script that will store the old SRC and eventually flip back to it:
function changer() {
var imgnum = Math.floor(15 * Math.random());
var time = Math.floor(5000 * Math.random());
var $img = $("img").eq(imgnum);
var newsrc = "noisy_static.gif";
if ($img.attr("src") == newsrc) {
$img.attr("src", $img.data("oldsrc"));
} else {
$img.data("oldsrc",$img.attr("src"));
$img.attr("src", newsrc);
}
setTimeout(changer, time);
}