Hi guys I'm using infiniteajaxscroll to load my photos on scroll down, the problem is the lightbox I'm using wont work on loaded pages.
My ininiteajaxscroll jquery
var ias = $.ias({
container :'.wrap', // main container where data goes to append
item:'.box-foto', // single items
pagination:'.paginacao', // page navigation
next:'.paginacao a', // next page selector
text: 'LOAD MORE PHOTOS'
});
ias.extension(new IASSpinnerExtension( ));
ias.extension(new IASTriggerExtension({offset: 10}));
This is my lightbox code: http://sachinchoolur.github.io/lightGallery/
function zoomPhotos(){
$("#list-photos-int").lightGallery({
thumbnail:true,
selector: '.box-thumb'
});
}
How can I use both components together on loaded pages?
Thanks.
You need to load lightgallery in a callback like this:
ias.on('rendered', function(items) {
$("#list-photos-int").lightGallery({
thumbnail:true,
selector: '.box-thumb'
});
});
Related
I have a page that load content using a MySQL database. And users can filter content using few buttons and then this content get replaced with dynamically pulled data using jQuery. Also the link I use in infinite scroll also change. But infinite scroll plugin seems to only take the same old link and not the newly loaded link to trigger scroll.
jQuery infinity scroll plugin that i use
https://cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.js
This is my code
<div class="container" id="myposts">
<div class=”post”>
<p>my content</p>
</div>
</div>
<nav id="page-nav"></nav>
//jQuery code
$('#myposts').infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '. post ', //
loading: {
finishedMsg: 'End of the page',
img: 'images/loader.gif'
}
}, function(newElements, data, url){
});
I’m changing the scroll trigger link from
<nav id="page-nav"></nav>
To
<nav id="page-nav"></nav>
But plugin still take the old link to trigger scroll. Is there any solution for this? Appreciate your time.
You could listen for the append.infiniteScroll event and then update the link from your page.
https://infinite-scroll.com/events.html#append
https://infinite-scroll.com/api.html#option
Something like this:
$container.on( 'append.infiniteScroll', function( event, response, path, items ) {
$container.infiniteScroll( 'nextSelector', '#page-nav a' )
});
I'm using Bxslider to display my images and it is working fine for the predefined images.But now, I want to get the images dynamically from the URL.
I used code like:
$('.bxslider').bxSlider({
onSlideNext : function($slideElement, oldIndex, newIndex){
$.get(myUrl,'',function(response){
$('.bxslider').html(response);
});
}
});
and it is appending the images to the slider, but the slider doesn't include those images.I also tried with reload like
var slider = $('.bxslider').bxSlider({
onSlideNext : function($slideElement, oldIndex, newIndex){
//do your ajax here, for example:
$.get(site_url + 'content/content/test','',function(response){
$('.bxslider').append(response);
slider.reloadSlider();
});
}
});
but still working.Can anyone suggest me any solution?
The slider loads slides during initialization. If reloadSlider() was not used then the slider does not know that there is a new slide was added. Also there is a newIndex property that sets the next slide.
newIndex: element index of the destination slide (after the
transition)
So when you click on Next at the end of the slideshow then newIndex=0 and even you will use reloadSlider() you will go to the slide #0. The only way here is to use goToSlide()
slider.reloadSlider();
slider.goToSlide(oldIndex+1);
Demo: http://jsfiddle.net/Gg2Sk/
Generally speaking, the idea to reload a slider on every new slide is not good at all. You might consider to load initially all slides but do not load images until they are not visible.
I have a page that contains a FancyBox image gallery and some single FancyBox elements like div's.
I need to have a watermark on my gallery items so I used the example from FancyBox page http://jsfiddle.net/w5gQS/
beforeShow: function () { $('<div class="watermark"></div>').prependTo( $.fancybox.inner );
But that prepended the watermark div to all FancyBox elements including the single ones.
My question:
is it possible to add watermark only to the gallery items and if it is how can it be done (the cleaner the method the better)?
P.S. using FancyBox v2.1.5
best regards
You can achieve that easily evaluating how many elements are in the group so if there are more than one then is gallery, otherwise is a single element.
Using the code on the jsfiddle of reference, tweak it this way :
$(".fancybox").fancybox({
beforeShow: function () {
/* Add watermark to gallery elements only */
if ( this.group.length > 1 ) {
$('<div class="watermark"></div>')
.bind("contextmenu", function (e) {
return false; /* Disables right click */
}).prependTo($.fancybox.inner);
}
}
});
See forked JSFIDDLE
I am having a little problem using javascript-ajax here. In my page, I load in the content into one of the div with id content in an ajax manner, whenever the user clicks on links which have the class myajaxreq, and the contents are loaded into the div in a fade in manner. The javascript that I am using is this
$(document).ready(function(){
$("#content").load($('.myajaxreq:first').attr('href'));
});
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
$('#content').hide().load(myhref).fadeIn('slow');
return false;
});
All works great on localhost, but when i put it online and then when we click on these links, then: First the same content which was initially there in the div is loaded in fade in manner. After a few seconds, the new content is loaded.
I think I am missing some sort of
if(content document is ready)
then load in a fade in manner
and so on..
Please somebody help me out here !!
call fade in after success callback... try this
var jContent = $('#content').hide();
jContent.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
here the whole code (untested)
$(document).ready(function(){
var jContent = $("#content").load($('.myajaxreq:first').attr('href'));
$('.myajaxreq').click(function() {
var myhref=$(this).attr('href');
jContent
.hide()
.load(
myhref,
{},
function(){
jContent.fadeIn('slow');
}
);
return false;
});
});
I'm using Twitter Boostrap with a website re-design, and I need some jQuery help. I'm using the 'Popover' add-on that is packaged with bootstrap, and I have it in a #div tag (#onlinedata to be specific), and I'm using jquery to reload the div every 10 seconds. This works fine, however, if you happen to be hovering over the link that activates the popover when the div refreshes, the popover gets stuck.
I'm using this code for the refresh:
setInterval(function(){
$("#onlinedata").load("http://website.com #onlinedata");
}, 10000);
And if needed, the code that activates the popover:
$(function () {
$('a[rel=popover]').popover({
placement:'right',
title:'Title',
content: $('#div-that-contains-data').html()
});
});
Is there a way to avoid the popover from being stuck open when the div reloads?
Any help is greatly appreciated.
Associated HTML
The $id is a key specific for each popover because I have multiple popovers.
The popover portion which is hidden until the popover_controller is hovered:
<div id="controller_popup_$id" style="display:none;">
<div style="font-size:11px">
//data_fetched_from_database
</div>
</div>
The link that triggers the popover
<li>Link Title</li>
And finally, the current javascript I'm using (it gets looped through the database records so each record gets the following javascript):
$(function () {
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title (this is fetched from the database for each popover)',
content: $('#controller_popup_$id).html()
});
});
$(document).ready(function() {
// refreshing code
setInterval(function() {
$('#controller_popup_$id').hide(); // close any open popovers
// fetch new html
$('#onlinedata').load('http://website-link.com #onlinedata', function() {
// after load, set up new popovers
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title (this is fetched from the database for each popover)',
content: $('#controller_popup_$id').html()
});
});
}, 10000); // 10 second wait
});
**New Code Witch Semi-Works**
I'm using the following code which semi-works. The only problem I'm having is after it reloads the #onlinedata div, it multiplies the popover links.
$(document).ready(function() {
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title',
content: $('#controller_popup_$id').html()
});
// refreshing code
setInterval(function() {
// fetch new html
$('a[rel=popover_controller_$id]').load('http://websiteurl.com/ #onlinedata', function() {
$('a[rel=popover_controller_$id]').popover('destroy'); // remove old popovers
// after load, set up new popovers
$('a[rel=popover_controller_$id]').popover({
placement:'right',
title:'Title',
content: $('#controller_popup_$id').html()
});
});
}, 10000); // 10 second wait
});
Like this answer, I think you will need to reapply the plugin to the new DOM elements that have been load-ed. This effectively means adding a copy of the popover code after the load call. If old popovers are hanging around, you may have to hide them. This gives us:
$(document).ready(function() {
// refreshing code
setInterval(function() {
$('a[rel=popover]').popover('destroy'); // remove old popovers
// fetch new html
$('#onlinedata').load('/onlinedata.html #onlinedata', function() {
// after load, set up new popovers
$('a[rel=popover]').popover({
placement:'right',
content: $('#div-that-contains-data').html()
});
});
}, 10000); // 10 second wait
});