I am struggling with my jquery hover combined with $.post.
My goal was to create a bunch of select buttons and if I hover it an image would change(a path to this image would load by $.post). The image would change to its default on mouseout.
And if the select button is clicked it would change the image permanently.
The issue is that the image is sometimes changed permanently even on hover.
Try it yourselves at link text
Try to hover over the selects furiously for a while and the image won't change back.
How can I fix this please?
var origpic;
var klik;
var inputval;
var newpic;
var origbnazev;
var cesta = "/ajaxobrazek.php";
$("input[name='barva']").hover(function() {
klik = 0;
inputval = $(this).val();
origbnazev = $("#bnazev").text();
origpic = $("#kocarekimg").attr("src");
$.post(cesta, {dodavatel_id : "<?php echo $row['dodavatel_id']?>", barva_cislo : inputval},
function(data){
$("#kocarekimg").attr("src","/images/maly-"+data+".jpg");
});
$.post("/ajaxbarva.php", {barva_cislo : inputval}, function(data){
$("#bnazev").text(data);
});
},function(){
if (klik == 0) {
$("#bnazev").text(origbnazev);
$("#kocarekimg").attr("src",origpic);}
});
$("input[name='barva']").click(function() {
klik = 1;
$.post(cesta, {dodavatel_id : "<?php echo $row['dodavatel_id']?>", barva_cislo : inputval},
function(data){
$("#kocarekimg").attr("src","/images/maly-"+data+".jpg");
origpic = "/images/maly-"+data+".jpg";
});
});
//thumbnails
$(".imgtn").hover(function() {
origpic = $("#kocarekimg").attr("src");
newpic = $(this).attr("src");
newpic = newpic.replace("tn-","maly-");
$("#kocarekimg").attr("src",newpic);
},function(){
$("#kocarekimg").attr("src",origpic);
});
I don't have any problem in Chrome, nor in Firefox and IE. The only thing I see is that the site is not as responsive as it should, and - frankly speaking - I don't understand why you're not caching the images refs once they're loaded.
Your script makes an ajax call at every single hover, that's nonsense.
Related
I have an image gallery and inside each image I have a div with the image name. When I click on an image a modal with some details is opened and the div with the image name is changed by the div with the tools.
What I want is that when closing the modal (just click outside it) everything returns to the original phase ie the div with the name replaces the div with the tools.
Javascript
$(document).ready(function() {
var toolbar = $('.ImageButtonsG').html();
$(".d-block").each(function (index, value) {
$(this).on("click", function(){
var default_title = $(this).find('.ImageText');
$(default_title).html(toolbar);
$('.ImageButtonsG').empty();
});
});
});
I found problem with your JS code. Here is the updated code:
$(document).ready(function() {
var toolbar = $('.ImageButtonsG').html();
$(".d-block").on("click", function(){
var default_title_ele = $(this).find('.ImageText');
var default_title = $(default_title_ele).html();
$(default_title_ele).html(toolbar);
$("#myModal2").on('hidden.bs.modal', function () {
$(default_title_ele).html(default_title);
});
});
});
Here is updated codepen.
I hope it will solve your problem.
I want to load all images before displaying them in a slideshow. I have been searching a lot but nothing seems to work. This is what i have so far and it doesn't work. I am loading images from the <a> tag from another div.
$('.slideshow').load(function(){
if (loaded<length){
first = $(settings.thumb).eq(loaded).find('a').attr("href");
$('<img src="'+first1+'"/>').appendTo('.slideshow');
}
else{ $('.slideshow').show(); }
loaded++;
});
Add an event listener to each image to respond to when the browser has finished loading the image, then append it to your slideshow.
var $images = $("#div_containing_images img");
var numImages = $images.length;
var numLoaded = 0;
var $slideshow = $(".slideshow");
$images.each(function() {
var $thisImg = $(this);
$thisImg.on("load", function() {
$thisImg.detach().appendTo($slideshow);
numLoaded++;
if (numLoaded == numImages) {
$slideshow.show();
}
});
});
It's a good idea to also listen for the error event as well, in case the image fails to load. That way you can increase numLoaded to account for broken image. Otherwise, your slideshow will never be shown in the event the image is broken.
Also note, that by calling detach() followed by appendTo() I am am moving the image in the DOM. If instead, you want to copy the image, use clone() instead of detach().
* EDIT TO MODIFY USER'S EXACT USE CASE *
var $images = $("li.one_photo a");
var numImages = $images.length;
var numLoaded = 0;
$images.each(function() {
$('<img />',
{ src: $(this).attr("href") })
.appendTo('.slideshow')
.on("load error", function() {
numLoaded++;
if(numLoaded == numImages) {
$('.slideshow').show();
}
});
});
* EDIT #2 *
Just realized you were putting everything in the $(".slideshow").load() function. Since $(".slideshow") represents a DIV, it will never raise a load event, and the corresponding function will never execute. Edited above accordingly.
This probably is a duplicate but I don't know how to express what is happening in a title description.
I have an image element which i delete and re-create with the click of a button, basically i apply filters with php to an image, and delete the previous element to replace it with the new image to display the new filter.
the code to create the element:
function pictureReset(data) {
$( ".filteredImg" ).remove();
var elem = document.createElement("img");
elem.setAttribute("class", "filteredImg");
elem.setAttribute("height", "328");
elem.setAttribute("alt", "");
elem.src = 'contest/filtered_'+tempFilePath;
document.getElementById("filteredImgContainer").appendChild(elem);
}
the code to apply the filter: (i have several filters but the code is the same, they just call a different php file
$('#sepia').click(function () {
var filePathName = tempFilePath;
$.ajax({
type: 'POST',
url: 'php/sepia.php',
dataType : 'text',
data: {
FilePath : filePathName
},
success: function (data) {
pictureReset();
}
}).done(function(response){console.log(response);});
});
now the problem is although it works fine on chrome, i.e. when i click the button the old image is removed and replaced with the new filtered image, on firefox although it refreshes, somehow it retrieves the old image (even though it doesn't exist because on the server if i retrieve the image the filter is applied), and displays the old filter instead of the new one. Any ideas as to why this is happening??
Apart from adding the parameters, you can also improve the code. Since you are already using jQuery.
You can replace this code:
function pictureReset(data) {
$( ".filteredImg" ).remove();
var elem = document.createElement("img");
elem.setAttribute("class", "filteredImg");
elem.setAttribute("height", "328");
elem.setAttribute("alt", "");
elem.src = 'contest/filtered_'+tempFilePath;
document.getElementById("filteredImgContainer").appendChild(elem);
}
With:
function pictureReset(data) {
var elem = $('<img class="filteredImg" alt="" style="height:328px;" src="contest/filtered_' + tempFilePath + '?t="' + $.now() + ' />');
$("#filteredImgContainer img.filteredImg").replaceWith(elem);
}
I used jQuery replaceWith for this code.
Is anyone able to determine, how to stop the jQuery caching the image that it grabs, and displaying the same image around and around again?
Basically the image is been re-uploaded every 5 seconds, as it acts as a webcam (if you check the time stamp on the bottom right of the image, you can tell if it's been updated or not)
http://colourednoise.co.uk/scripts/index.htm
Thank you
(sorry I forgot to hit paste for the code)
$(function(){
$(document).ready(function() {
var imgs = ['http://www.ramseycommunityradio.co.uk/images/webcam.jpg', 'http://www.ramseycommunityradio.co.uk/images/webcam.jpg']
$("#webcam").attr('src', imgs[1]);
var refreshId = setInterval(function() {
$("#webcam").fadeOut("slow", function() {
var $el = $(this);
$el.attr('src', $.inArray($el.attr('src'), imgs) === 0 ? imgs[1] : imgs[0]);
$el.fadeIn("slow");
});
}, 2000);
});
You could try appending a changing query string onto the URL, this should stop caching if that is indeed your problem. I've seen this done with a time stamp here: how to generate and append a random string using jquery
So each time you generate an image you do:
var qs = (new Date).getTime();
var url = 'http://www.example.com/images/myimage.jpg?' + qs;
$(el).attr('src',url);
your code:
var imgs = ['http://www.ramseycommunityradio.co.uk/images/webcam.jpg', 'http://www.ramseycommunityradio.co.uk/images/webcam.jpg']
$("#webcam").attr('src', imgs[1]);
var refreshId = setInterval(function() {
$("#webcam").fadeOut("slow", function() {
var $el = $(this);
$el.attr('src', $.inArray($el.attr('src'), imgs) === 0 ? imgs[1] : imgs[0]);
// this condition is redundant, it will ultimately give the same result always
// because imgs[0]==imgs[1]
$el.fadeIn("slow");
});
}, 2000);
as far a JQuery is concerned you are not changing the SRC attribute (JQuery knows nothing about the content of the image). Try using two different names in the server-side like webcam0.jpg and webcam1.jpg and alternating between them.
One trick is t append a random query string URL which causes the image to reload from the server. The code could be something like:
setInterval(function() {
var img = $("#img").get(0);
img.src = img.src.replace(/\?.*/, "") + "?" + Math.random();
}, 5000);
I've tried a lot of things, but nothing is working.
When I click on an mage, I want it's z-index to be "9999". When I click to show another image, I want the previous image's z-index to go back to "0".
So basically, I only want one image to show at a time - I want a specific function to run for each image.
http://jsfiddle.net/WarrenBee/a78R7/
PLEASE help me!
Change your JavaScript to this:
$('.char').click(function () {
$('.char img').css({'z-index' : '0'});
$(this).children('img').css({'z-index' : '9999'});
});
This will set the z-index of all imgs inside a char class back to 0, before setting the one that was clicked to 9999.
Just remember the last image and value and put the old value back:
var lastImage, lastZIndex;
$('.char').click(function () {
var thisImage = $(this).children('img');
if (lastImage) {
lastImage.css('z-index', lastZIndex);
}
lastImage = thisImage;
lastZIndex = thisImage.css('z-index');
thisImage.css({'z-index' : '9999'})
});
Updated fiddle
Ideally, avoid creating global variables by wrapping all of that in a function:
(function() {
var lastImage, lastZIndex;
$('.char').click(function () {
var thisImage = $(this).children('img');
if (lastImage) {
lastImage.css('z-index', lastZIndex);
}
lastImage = thisImage;
lastZIndex = thisImage.css('z-index');
thisImage.css({'z-index' : '9999'})
});
})();
Further updated fiddle