I'm using the Lightbox2 script and the content of my page is loaded via an AJAX request.
I don't find any function to attach new images or initialize Lightbox2 after an AJAX request, How can I make that in order to use Lightbox2 for images loaded via AJAX ?
Léo
I had to reinitialize lightbox in order to detect new images. I have done that like this:
window.lightbox.init();
I placed this code in my success handler of ajax call after I have added the new content:
contentContainer.empty().html(data);
From the documentation files: http://lokeshdhakar.com/projects/lightbox2/
You do not need to initiate anything, any image link with the data-lightbox attribute like this:
Image #1
will work automagically even if loaded by AJAX as soon as you add it to your DOM.
EDIT: After having taken a look at the lightbox script, you may have to change as well the line #51:
$('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
into this:
$('body').live('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) {
Related
I'm building a JQuery mobile site which has an image slider on 2 pages. The sliders are activated using the following JS:
$(function () {
$("#slider").excoloSlider();
});
where '#slider' is the name of the div that gets rendered as the slider.
I have this slider on the 2 pages and have given both the same id, and don't want to insert the above code into both pages. To make things easy I want to be able to make add the above code into a.js file that I'm referencing at the top of both pages.
However, the script only kicks in when one of the pages are the first page to be navigated to. So, I assume this means the code is only being called in the once, and due to the AJAX loading of the subsequent page, it isnt called when this new page loads.
So, how can I run the code to affect any/all pages which feature the slider?
I dont know how many times you have to call .excoloSlider(); function. In case you have to call it each time the page is visited, then you need to use any of these page events, pagecontainershow or pagecontainerbeforeshow.
If you use pagecontainershow, you can run .excoloSlider(); on #slider even if you have the same id in a different page. This way, you specify in which page to look for #slider.
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
/* check if #slider is within active page */
var slider = activePage.find("#slider").not(".slider");
if(slider) {
slider.excoloSlider();
}
});
Update
I have added .not(".slider") selector to exclude already rendered slider. The function .excoloSlider() will be called on new sliders only.
Demo
Try to use class instead of id since id is unique, then you can change your jQuery code to:
$(function () {
$(".slider").excoloSlider();
});
Use jQuery Mobile API for the navigation system
$(window).on( "navigate", function( event, data ) {
$("#slider").excoloSlider();
});
Edit
Use pageinit
From the jQM docs:
Important: Use $(document).bind('pageinit'), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
This problem has bugged me for some time.. If I load something in through AJAX, I have to have the javascript inside the AJAX loaded file (or call an external JS).
How can I make AJAX loaded content be controlled by the master or parent page??
I'd like to take control of all links to pass them through javascript (jquery) and do some fun stuff, but I don't really want to make it an external JS and use $.getScript. I just want my main javascript to be able to work with ajax loaded content.
(Here's an example)
$('a').click(function(e){
e.preventDefault();
// Fun stuff
})
Bind your method, using .on(), to the closest parent container that isn't replaced. For example:
$(function(){
$('body').on('click', 'a', function(e){
e.preventDefault();
// Fun stuff
})
});
See: http://api.jquery.com/on/
Can you show your full example? After you load the content you want trough AJAX you can control the content by Javascript after you have appended it to the DOM.
For example:
success: function(data) {
$('#newContent').hide().html(data)
.find('a').click(function(e) {
e.preventDefault();
});
}
There is a situation I am having with jQuery. In particular its prettyPhoto library and getJSON function.
I have a page which loads HTML, it calls jQuery and prettyPhoto. There is some inline JS which makes a JSON request further down the page:
It should work like the below:
1) Page loads,
2) Javascript code run,
3) Script runs a jQuery JSON request which returns and has HTML (a-tags and images inside each a-tag) inside,
4) Script then prints the HTML from inside the JSON to the screen,
5) User clicks a-tag/image and it opens in prettyPhoto's iframe popup.
NOTE -> Each a-tag has a prettyPhoto id attached (to load the image in prettyPhoto using iframe popup).
The problem is the images (a-links) do not open with prettyPhoto and I am not sure why. There is no JS Error.
However, it does work if i manually have the HTML (a-links/image) already there (so just loading their HTML from the JSON request seems to make the difference).
Seems by time the JSON request returns (with HTML) prettyphoto already binds to a-tags (or lack off).
Tested so far:
Tried putting JSON request in 'document.ready' and prettyPhoto in 'window.load'. So does JSON requests early and prettyPhoto binds when everything else loads - failed
Tried using jQuery AJAX instead of JSON - failed
Dont need the code especially but having trouble with the logic.
It sounds like the HTML from the JSON (a-links/images) doesnt come back quick enough (before 'window.load' runs).
Try putting the prettyPhoto JS into the success callback (i.e. where returns data).
Below load_images.json is the JSON request you do which returns the HTML (a-links and their images):
$.getJSON("load_html.json", function() {
//grab HTML data (images/a-links) from json file and print into page
})
.success(function() {
//JS code running prettyPhoto inside here. Now will bind to a-links.
});
PrettyPhoto now binds to A-links AFTER the JSON has loaded them.
Hopefully will help having the prettyPhoto stuff AFTER the a-links.
If that fails try putting the prettyPhoto code inside the complete callback which occurs after success callback. Like the below:
$.getJSON("load_html.json", function() {
//grab HTML data (images/a-links) from json file and print into page
})
.success(function() {
//nothing
})
.complete(function() {
//JS code running prettyPhoto inside here. Now will bind to a-links.
});
This way you are giving prettyPhoto plenty of time to bind to the correct a-links which are marked for it.
Try that.
Question
I want to play a loader when any page is loading and it work stop when complete page is loaded. Any idea?
i am new in jquery or javascript.
Just put a DIV on your page immediately with the loading graphic. Put this script anywhere on your page or at the top of an external script file:
$('BODY').append('<div id="loading"><img src="images/loading.gif" /></div>');
Obviously you'll need to style it to position it wherever you want. We do it this way rather than just hard-coding it into the page content so that anyone with JavaScript disabled won't see it.
Then attach to the load event to hide the loading DIV once the page is done. Put this script at the bottom of your page or inside a $(document).ready().
$(window).load(function() {
$('#loading').hide();
});
You need to listen the event onload
window.onload = function() {
// do something
}
or in jquery
$(window).load(function() {
// do something
});
but with jquery a think is better to use :
$(document).ready(function() {
// do something
});
You can use ajaxStart and ajaxStop methods.
Demo:
http://www.balam.in/personal/triponetDemo/pre-loader.html
Click on view source to see the CSS and javascript.
Have a div with id as loading and style the div to show the ajax spinner. Whenever an ajax method is triggered it will show the loading div and when the ajax request is completed, it hides the loading div.
Note that you need to have the loading div in all the pages where ever you want to show it.
Well in case you want to show the ajax spinner on refresh,
check the link below:
http://www.balam.in/personal/triponetDemo/pre-loader-refresh.html
View source to see the implementation
Everytime you refresh it will show the ajax spinner and when the DOM is ready it hides the ajax spinner.
I'm changing the image src of an image node.
I want to be able to make sure that it's changed before executing somecode. How would i do that?
right now i have
function changePic(imgNode, newPic, desc){
var descNode = $("#description");
$(imgnode).fadeTo(500, 0, function(){
$(imgnode).attr("src", newPic);
$(imgnode).attr("alt", desc)
descNode.text(desc);
$(imgnode).fadeTo(500, 1);
});
}
Works great if the server's fast/ a local server. Works terribly if the server's slow, where the image will fade back in before changing...
any idea?
Edit: I'm loading the image when changePic is called. Any better ways to do it?
More: Also why is it not a good idea to put the last line,
$(imgnode).fadeTo(500, 1);
, outside of the callback function?
Preload the image, but to be sure it's completely loaded, use the .load() event.
Quote:
The load event is sent to an element
when it and all sub-elements have been
completely loaded. This event can be
sent to any element associated with a
URL: images, scripts, frames, iframes,
and the window object.
And don't miss this line:
It is possible that the load event
will not be triggered if the image is
loaded from the browser cache. To
account for this possibility, we can
use a special load event that fires
immediately if the image is ready.
event.special.load is currently
available as a plugin.
I put together an example of how I think you want it to work. I switch between three images I found through Google Images. I bind the load event before I change the src of the image to be sure it's triggered.
http://jsfiddle.net/xdjjR/1/
I guess, you can preload image in hidden elements, so that it's loaded with other html. When the source changed such image should be shown immediately.
Use the callback param
doc
ex from doc:
$('#clickme').click(function() {
$('#book').fadeOut('slow', function() {
// Animation complete.
});
});