My page (built using wordpress) uses some jquery to show a modal when an image is clicked. The modal contains the image that was clicked and I used the below jquery to do this.
Trouble is that when the page is loaded, the first image click shows the modal but the src of the modal image hasnt been updated with the url of the clicked image.
It looks like the jquery hasnt run. Once the modal is closed and a new image is clicked it works.
The page does have lazy loading but the image says "loaded" in the image tag
Any ideas?
page link: https://www.musiciansforscreen.com/musicians/flavio/
.prof-image is the imafge the user clicks
.lightbox-image is the image in the modal
jQuery('.prof-image').click( function() {
var image = jQuery(this).attr('src');
jQuery('.lightbox-image').attr('src', image );
});
Ok I actually solved this by updating the code to change the "data-lazy-src" as well as the "src" attribute. The "data-lazy-src" attribute was cueing up the placeholder image so changing that sorted the issue.
your code does not run in the first time and then it runs in the second time because the modal was about "showing" and not "shown" yet ..
so that's why the ".lightbox-image" will be not used to set your image because it was not loaded yet in the dom (in the first step).
in that case you have to use the "on shown event" of the modal" , after that put your code insde .
look at this modal events
here is my code solution:
var lastImgSrc = null;
/** change #myModal to your modal id **/
jQuery('#myModal').on('shown.bs.modal', function (e) {
// if the modal is fully loaded and the lastImgSrc is not null, set the src url with the wanted value.
if(lastImgSrc){
jQuery('.lightbox-image').attr('src', lastImgSrc );
}
});
jQuery('.prof-image').click( function(e) {
e.preventDefault();
lastImgSrc = jQuery(this).attr('src');
jQuery('#myModal').modal('show'); // show modal manually
});
jQuery('#myModal').on('hidden.bs.modal', function (e) {
lastImgSrc = null; // if modal closed then reset the variable;
})
Related
I have an existing jQuery colorbox gallery that works fine when I click any of the 4 images which is initialized on document ready with:
$(document).ready(function () {
if ($('.gallery-thumbnail').length > 0) {
$('.gallery-thumbnail').colorbox({ rel: 'gallery-thumbnail', transition: 'fade' });
}
});
I also have a link in the page, which I would like to also open this same gallery of images. I thought I would be cute and try to just replicate a user clicking one of the images with $('.gallery-image').first().find('a').click(); which works perfectly and opens the image gallery when I type it in the Chrome Inline Console and hit Enter, but when it is run from the code, it just pops the gallery open with the orange loading GIF which spins endlessly. After that I tried having an onclick handler directly on the HTML anchor which had the code $('.gallery-thumbnail').colorbox({rel: 'gallery-thumb', transition: 'fade' }); which resulted in the same endless loading GIF as before. To ensure that I wasn't going crazy, I hooked the OnClick event handler to a function which runs this code:
function showColorbox() {
$('.gallery-thumbnail').each(function () {
$(this).addClass('test');
});
$('.test').colorbox({rel: 'gallery-thumb', transition: 'fade' });
}
Unfortunately, I still end up with the endless loading colorbox, but I verified that my image anchors all had the class 'test'. Throughout this whole thing - I have also verified that there are no JS errors in the console. Any help would be greatly appreciated.
There's an FAQ entry for this:
http://www.jacklmoore.com/colorbox/faq/#faq-click
Create a separate link for opening a gallery
Lets say you've assigned Colorbox to a set of links in your document,
but you also want to have an "Open Gallery" link that opens the first
item in your set. When "Open Gallery" is clicked, you want to prevent
the default action, then trigger a click event on that first set item.
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});
I have an odd issue in protractor.
All I need to do is test form thats in a modal. I can confirm that the modal is open, but then I want to sendKeys to the input(s).
element(by.id('modal')).click().then(function () {
var modal = $('.modal');
browser.wait(EC.visibilityOf(modal), 5000);
expect(modal.isDisplayed()).toBeTruthy();
element(by.model('userInput.firstName')).sendKeys('HELLO'); // <- this fails
})
This test will fail with ElementNotVisibleError. But when I set the modal to auto open once the page is hit (rather than via a button click), I make sure the modal is displayed and send the keys. This passes fine.
Any advice is appreciated.
Wait for the visibility of the input element instead:
var modal = $('.modal');
var modalInput = modal.element(by.model('userInput.firstName'));
browser.wait(EC.visibilityOf(modalInput), 5000);
modalInput.sendKeys('HELLO');
I have a field and a container for an image.
In this container there is a default image.
I want the user to put a link of an image and then submit it, this then adds the image to the
src attribute of the default image.
My question, how should I load image, and during this time show a progress bar to the user, and after loading finishes, hide the URL. My main concern now is how to load the resource.
Now I have written this script:
jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button
$("#url-logo-progress").show(); // show the progress bar to it
var logoUrl = $("#logo-url").val(); // pick up the inserted URL
$("#image-width").attr("src", logoUrl); // and put the URL into the src attribute of the image
});
Though I need something like this:
$.imageLoad({ url : "url/to/image.jpg",
complete : function(){
alert("upload finished!");
});
I have no problem to writen callbacks and status's, but I don't know how to load a resource.
Thanks in advance
You just miss the onload handler. When you set the src attribute on the image (the DOM image element), it begins loading the resource. When the resource is loaded, image will trigger the onload event.
So, instead of
jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button
$("#url-logo-progress").show(); // show the progress bar to it
var logoUrl = $("#logo-url").val(); // pick up the inserted URL
$("#image-width").attr("src", logoUrl); // and put the URL into the src attribute of the image
});
do
jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button
$("#url-logo-progress").show(); // show the progress bar to it
var logoUrl = $("#logo-url").val(); // pick up the inserted URL
var image = $("#image-width")[0];
image.onload = function(){alert("upload finished!");}
image.src = logoUrl; // and put the URL into the src attribute of the image
});
so that you're dealing with the reference to the Image DOM element directly, not with the jQuery reference. Of course, when the resource is loaded, you will have to hide the progress bar etc... not just alert the message.
I want an image, which is not clicked after 5 seconds, to turn into another image, which then returns to the original image when clicked.
So
image > (user not clicked on image after 5 secs) > image prompting user to click > (user clicks) > image back to original.
Any ideas?
Sure, not a problem. You can do it with the following code:
HTML
<img id="clickable" src="http://fullahead.org/gallery/toronto-2010/image/thumb/DSC_3356.jpg" style="cursor: pointer" title="Clicky!"/>
Javascript
// Get a reference to the image and save its original source
var img = document.getElementById('clickable');
var origSrc = img.src;
// Create the timeout to change the source (2 seconds in code below)
var timeout = setTimeout(function(){
img.src = 'http://fullahead.org/gallery/ilse-de-grand-calumet-2010/image/thumb/DSC_3163.jpg';
}, 2000);
// Register the click event handler for the image and clear the timeout
img.onclick = function(){
clearTimeout(timeout);
this.src = origSrc;
}
You can see it in action here.
This is very easy with jquery
what we will do is: when the document is ready, get all the images with class "promptimage", set a timer on them, when timer passes -> change their source to another source, and when it is clicked, set it to default src.
$(function(){
var original_src = $('.promptimage').attr("src");
$('.promptimage').attr("src",'set your image source with the prompting image').delay(800);
$('.promptimage').click(function(){
$('.promptimage').attr("src",original_src);
});
});
I'm not sure exactly where you are having problems so I'll give a general overview of what I think is needed:
Image should have an onclick event that can determine when it has been clicked. This can set a flag and reset the image if necessary. It can also cancel the timer in the next step if it is still running.
On page load set a 5 second timer. Once that is up run a function that checks if the image has been clicked. If it hasn't change the image. If it has do nothing.
I'd suggest search or reasking a new question on specific bits you are having problems with.
I've got some links I want to have dynamically open in a jQuery UI Dialog using jQuery.load(). Once the dialog is open, I want the links load inside the already opened dialog.
So, the site loads, you click a link, and it opens in a dialog. That's fine. You can close and open it as many times as you want.
While it's open, if you click on one of the links from the loaded content, it doesn't work.
An Ajax GET request IS performed, but the resulting content is not successfully loaded into the dialog. (Firebug shows the request)
The previous dialog title and dialog content is erased. But the new content is not shown, NOR is it inserted into the DOM. (The generated source does not show content anywhere.)
The links look like this...
<a href="http://www.example.com/index.php?action=something&search=somethingelse#fragment" rel="dialog" title="Title Attribute">
The click event is bound...
$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);});
The ajax_dialog function checks to see if there's a dialog, calls to create one if there isn't, calls to load the content, sets the title, and opens the dialog if it's not open.
function ajax_dialog(_this, _event){
var urlToLoad = $(_this).attr("href").replace("#", "&ajax=true #");
var linkTitle = $(_this).attr("title");
// Create dialog
if(!$('body').find('#ajaxDialog').size()){
$('body').append('not yet init<br />'); // This shows up the first click only.
init_dialog('#ajaxDialog');
}
// Load Dialog Content
load_dialog('#ajaxDialog', urlToLoad);
// Add title
$('#ajaxDialog').dialog('option', 'title', linkTitle);
// Open dialog (or reload)
if(!$('#ajaxDialog').dialog('isOpen')){
$('#ajaxDialog').dialog('open');
$('body').append('not yet open<br />'); // This shows up the first click only.
}
return false;
}
The init_dialog function creates the dialog if there isn't one...
function init_dialog(_this){
$('body').append('<div id="ajaxDialog"></div>');
// Set Dialog Options
$(_this).dialog({
modal:true,
autoOpen:false,
width:900,
height:400,
position:['center','center'],
zIndex: 9999,
//open:function(){load_dialog(this, urlToLoad);}, This didn't work without destroying the dialog for each click.
close:function(){$(this).empty();}
});
}
The load_dialog function loads the desired content into the dialog.
function load_dialog(_this, urlToLoad){
$(_this).load(urlToLoad, function(){
$('body').append(urlToLoad + ' load function<br />'); // This shows up each click
$(_this).append("Hihi?"); // This shows up each click
});
// The loaded information only shows the first click, other times show an empty dialog.
}
Hah. As shown in the code, I was using $jQuery.load() and pulling the exact href of the link as the URL to request. All the URLs had fragments/anchors on the end, that is: ....html#id-of-div.
In this case, the script itself was working fine, but the #id-of-div didn't exist on the page yet. That's why I could see content returned, but the dialog just ended up blank. :-)