I am currently working with the Galleria js Slider.
I need callback to event when a user tries to view slide images 6>
I want to bar users from seeing slide 6 and above and display a popup when he clicks on 6> thumbnails or the forward arrow.
Apologies for my poor Engish.
Can anyone help. Thanks in advance.
I've tried
var gallery = Galleria.get(0);
gallery.bind("loadfinish", function(e) {
if (e.index > 5) {
myCallback();
return false; // Here I need to prevent image showing
}
});
Solution:
var selector = '#galleria-1';
Galleria.run(selector);
$(selector).data('galleria').bind('loadfinish', function(e) {
if(e.index > 4) { // > the fifth image
$(selector +' .galleria-image img').css('opacity', 0);
this.show( 0 );
myCallback();
}
})
Try something like:
Galleria.on('loadstart', function(e) {
if(e.index == 5) {
alert('6th image!');
}
})
http://galleria.io/docs/api/events/#loadstart
Related
I want to load ajax data when I reach the end of a particular div.
I use now :
$(window).scroll(function() {
if (! loadingAjax) {
if ($(window).scrollTop() > ($element.offset().top + $element.outerHeight() - 500)) {
from++;
loadingAjax = true;
loadMyData(from);
}
}
});
It seems a little random when I show console for example, or on smartphone.
What is the best way to detect user is reaching end of a div ($element here) ? With an offset of 50px for example before the end ?
Please have a look at the solution and you will be console logged in the last div.
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top +
$('.posts').outerHeight() - window.innerHeight) {
console.log('End Div');
}
});
I have 4 div bars in my home page. I'm loading those div bars by on click. But I want to load the the 1st div when page loading, then the 2nd div should load after 5 seconds. after 5 sec 3rd div should load like wise. this is my code : -
$(document).ready(function () {
$('#click1').click(function () {
$('#desc1').toggle(400);
$('#desc2').hide();
$('#desc3').hide();
$('#desc4').hide();
$('#desc5').hide();
});
});
Thnx,
var delay=5000;
$(document).ready(function () {
$('#desc1').toggle(function(){
$('#desc2').toggle(delay,function(){
$('#desc3').toggle(delay,function(){
$('#desc4').toggle(delay,function(){
$('#desc5').toggle(delay,function(){
});
});
});
});
});
});
Try this
You can show them with delay(ms);
$('#desc2').delay(5000).show();
$('#desc3').delay(10000).show();
$('#desc4').delay(15000).show();
$('#desc5').delay(20000).show();
You should consider setInterval();, cleanest way to achieve that IMHO.
Something like:
$('#click1').click(function () {
var nb = 1;
var int = setInterval( function(){
var el = $('#desc'+ nb);
el.addClass('show');
nb++;
if( nb > 5) {
clearInterval(int);
}
}, 400);
});
I copied that from an old project. Note that I use CSS to toggle the div.
Try this code
$('#click1').click(function () {
$('#desc1').fadeIn(400);
$('#desc2').delay(5000).fadeIn();
$('#desc3').delay(10000).fadeIn();
$('#desc4').delay(15000).fadeIn();
$('#desc5').delay(20000).fadeIn();
})
(function(s){
var i = 2, flag, url;
function load(){
if( i == 6){
console.log("complete output!");
clearTimeout(flag);
return ;
}
//make something
$(selector+i).load(ulr+"&index="+i, function(){
i++;
flag = setTimeout(load,5000);
})
}
load();
})('desc');
toggle can complete display or hide , i would like to use load and setTimeout
I am trying to make a small animation by moving the background position (frames) of the image which is background on my div. I am using Jquery to make this animation happen. I have 6 frames on the background image, first frame starting at 0,0px, second starting at 85px,0, third at 172px,0 and so on.
I want to transition between these frames until stop is clicked. My jquery code is pasted below. I have made an array for the pixels to move across. I want each frame to hold upto 1000 milliseconds, then transition to next frame. I am going wrong somewhere but unable to figure out where..
here is my code
$(document).ready(function () {
var timer;
$("#clickMe").click(function() {
//alert("you are here");
timer=setInterval(moveframe,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
function moveframe() {
var framespx=[0,85,172,256,512,1024];
for (var i=0;i<framespx.length;i++) {
alert("you ar here");
var xPos=framespx[i]+"px ";
var yPos="0px";
$('.fixed').css({backgroundPosition: xPos+yPos});
}
}
your code looks like has some logical error,run your code ,just can see the same background.
try:
$(document).ready(function () {
var timer;
$("#clickMe").click(function() {
//alert("you are here");
timer=setInterval(moveframe,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
var j=0;
function moveframe() {
var framespx=[0,85,172,256,512,1024];
for (var i=0;i<framespx.length;i++) {
if (j%framespx.length == i){
alert("you ar here");
var xPos=framespx[i]+"px ";
var yPos="0px";
$('.fixed').css({backgroundPosition: xPos+yPos});
j++
break;
}
}
}
css({'background-position': xPos+' '+yPos});
okay the above attribute value is a bit confusing for me, hopefully that is correct but with more surety;
css('background-position-x', xPos);
css('background-position-y', yPos);
Now I don't think for loop is mandatory here
var posAry=[0,85,172,256,512,1024];
var currPos=0;
var timer;
$(document).ready(function () {
$("#start").click(function() {
timer=setInterval(move,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
function move() {
$('.fixed').css({'margin-left': posAry[currPos]+'px' }); /**you can change it to background postion/padding/... as needed by you**/
currPos++;
if(currPos==(posAry.length))
currPos=0; // for looping back
}
http://jsfiddle.net/7PvwN/1/
I'm currently using jquery.inview to detect when certain elements are fully visible in the browser. I have this working correctly like so:
$('.exclusive').bind('inview',function(e, isInView, visiblePartX, visiblePartY) {
var elem = $(this);
if (elem.data('inviewtimer')) {
clearTimeout(elem.data('inviewtimer'));
elem.removeData('inviewtimer');
}
if (isInView) {
elem.data('inviewtimer', setTimeout(function() {
if (visiblePartY == 'top') {
elem.data('seenTop', true);
} else if (visiblePartY == 'bottom') {
elem.data('seenBottom', true);
} else {
elem.data('seenTop', true);
elem.data('seenBottom', true);
}
if (elem.data('seenTop') && elem.data('seenBottom')) {
elem.animate({ 'opacity' : 1}, 1000)
elem.unbind('inview');
}
}, 1000))
}
});
However, I want to amend this code slightly, so that when there are multiple matched elements in view, these are faded in sequentially with a slight delay between each. And of course when the user moves the viewport to bring more elements into view it will continue to do the same. Can anyone point me in the right direction?
Thanks,
Chris
You can delay fading in of particular elements like this:
var divs = $('div'); // replace with your selector
$.each(divs, function(i, item) {
setTimeout(function() {
$(item).fadeIn(1000);
}, 1000 * i);
});
Check the live DEMO.
I'm trying to use jquery to switch between three images once you click on the image. Upon clicking on the third image, it switches it back to the first picture.
Is there a way to adapt the following to switch between more than two pictures, and for it to allow more than it switching once?
jQuery
$(document).ready(function() {
$("#clickMe").click(function() {
$("#myimage").attr({src : "picture2.png"});
});
});
HTML
<div id="clickMe"><img id="myimage" src="picture1.png" /></div>
Thanks.
This should do that:
$(document).ready(function() {
$("#clickMe").click(function() {
var src = $('#myimage').attr('src');
//if the current image is picture1.png, change it to picture2.png
if(src == 'picture1.png') {
$("#myimage").attr("src","picture2.png");
//if the current image is picture2.png, change it to picture3.png
} else if(src == "picture2.png") {
$("#myimage").attr("src","picture2.png");
//if the current image is anything else, change it back to picture1.png
} else {
$("#myimage").attr("src","picture2.png");
}
});
});
This works:
$(document).ready(function () {
var i = 1; // Used to keep track of which image we're looking at
$("#clickMe").click(function () {
i = i < 3 ? i + 1 : 1;
$("#myimage").html("picture#.png".replace("#", i));
});
});
Online demo: http://jsbin.com/afito
This is link might be helpful
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/