I have a web page that loads pictures in a infinity scroll typ of way. Also I have a javascript that put a animation on the picture. The problem I'm facing is that the new images that are loaded will not get the animation properties.
First I have my Javascript code
<script type="text/javascript">
jQuery(document).ready(
function() {
jQuery('.scroll_container').scrollExtend(
{
'target': 'div#scroll_items',
'url': '/popular_data.php',
'newElementClass' : 'mosaic-block cover2',
'onSuccess' : ''
}
);
}
);
jQuery(function($){
$('.cover2').mosaic({
animation : 'slide', //fade or slide
anchor_y : 'top', //Vertical anchor position
hover_y : '40px' //Vertical position on hover
});
});
</script>
What I would like to do is that the variable OnSuccess should call the cover2 mosaic function. But my Javascript knowledge is not that good. But i think this would solve the problem.
The plugins I'm using is:
http://buildinternet.com/project/mosaic/ and
http://contextllc.com/tools/jQuery-infinite-scroll-live-scroll
I have notice that if I append the javascript to the popular_data.php file then it will work on the second to last picture but never the last loaded picture.
Related
I'm not sure why this is happening, as I've followed the directions on Zurb's website. It doesn't matter what size the window is upon opening the page with TwentyTwenty, it will only show the slider once the page has been resized. The plugin works flawlessly aside from that. I have a feeling there's some way to adjust the following to make it load without resizing the window...
$(window).load(function() {
$(".twentytwenty-container").twentytwenty();
});
Maybe? Much appreciated.
It's a little bug, but fixed by add code.
Add this to jquery.twentytwenty.js file:
$(window).load(function() {
$(window).trigger("resize.twentytwenty");
});
$.fn.twentytwenty = function(options) {
var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
// >>>>> HERE ADD CODE <<<<<<
return this.each(function() {
//.......
source: https://github.com/zurb/twentytwenty/pull/69/commits/471a824bf5ab233797d0de689a5be105347c81e2
I've sat on this same issue for a long time. I was using the class to .twentytwenty-container in the code. When I switched it to an id (here, #container-id), the issue seemed to go away.
$(window).load(function(){
$("#container-id").twentytwenty({
default_offset_pct: 0.5, // How much of the before image is visible when the page loads
orientation: 'horizontal' // Orientation of the before and after images ('horizontal' or 'vertical')
});
});
Does this work for anyone else?
I'm having a trouble with a jQuery image slider that works only the first time i open its page !
I have one main page, that includes via Ajax three page portions (Home, Presentation and Contact), the home portion contains the image slider !
To move through the pages, i use another jQuery page slider which includes the right portion and plays a sliding animation to show it !
So when i go for example from the home page to the presentation page, and then comeback to home ... the image slider isn't working anymore, and sometimes doesn't even appear !
What does it mean ?
How can i make sure the script is reloaded after the page slider finishes the transition, cause i think the problem comes from it ?
$(document).ready(function() {
$('#slides').slidesjs({
width: 700,
height: 300,
play: {
active: false,
auto: true,
interval: 3000,
swap: true
}
});
$(".menuButton").click(function() {
var page = $(this).attr("id");
var cont = $("#container");
var cont1 = $("#container1");
cont1.load("parts/"+page+".html", function() {
cont.hide("slide", {direction:"right"}, function() {
cont1.show("slide", {direction:"left"});
});
});
});
});
Thank you.
If the script is included in the portions loaded by ajax, it won't run (ajax loaded scripts are not ran by default). So basically, after the success event, just call the functions from the script.
I'm trying to load an image using FancyBox and once the image is loaded it should display a magnifying glass when hovering over the image.
I'm using the following javascript file to display the magnifying glass:
http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html
My code is as follows:
<script type="text/javascript">
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox({
'titlePosition' : 'inside',
onComplete: function(){
alert("test");
$("#fancybox-img").imageLens();
}
});
I'm trying to load the imageLens using the "onComplete" method but nothing happens... does anyone know whats wrong with my code?
Thanks
You have to use Colorbox plugin (it's similar to fancybox):
$(".callbacks").colorbox({
onComplete:function(){$('.cboxPhoto').imageLens( {lensSize: 200 }); }
});
I am trying to make a text-slide-in effect on a web page. I am using the javascript slidesjs library because it seemed like the best fit. However, I cannot make it work when triggered by a web click.
I have a live example running at: http://107.22.173.10
Note that when you click the "GOTO" links nothing happens.
The basic code is as follows and it seems the page is supposed to automatically put '#' anchors in to trigger the slides. I can't make this work, or figure out how to debug this.
$(function(){
// Set starting slide to 1
var startSlide = 1;
// Get slide number if it exists
if (window.location.hash) {
startSlide = window.location.hash.replace('#','');
}
// Initialize Slides
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
generatePagination: true,
//play: 5000,
//pause: 2500,
hoverPause: true,
// Get the starting slide
start: startSlide,
animationComplete: function(current){
// Set the slide number as a hash
window.location.hash = '#' + current;
}
});
});
Does anyone see what's going wrong here?
What is the best way to debug this problem?
Is there a better way or library I should be using?
Any advice is appreciated. Thanks!!
You're not following the example from slidesjs.com. See "Basic HTML structure". You're putting only one element in the #slides_container div, and assign all sorts of weird absolute positioning to it, which of course won't work with the animation code.
Copy paste the example first, then start adding your own tweaks concerning style.
I'm building some website with image gallery.
There is a normal colorbox start up script
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}'});
It starts when I press on hyperlink covering img tag.
But I also have some img tags, without hyperlinks fitting them. And in that way default power up script is not working.
But I have different one which works partially .
$('.colorbox').click(function() {
$(this).colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current},
$s_total[$lid]: {total}', maxWidth: 960,
maxHeight: 640, scalePhotos: true,
href: $(this).attr('src')});
});
This one powers up both img tags inside hyperlinks and img tags without hyperlinks.
And now the problem. In this way there are no arrows and info about prev, next image, and number of total images.
Is there any way out of my problem ?
Again I repeat, I have 2 types of pictures in my database.
img tags put into hyperlinks ( default colorbox way )
img tags without hyperlinks but with a colorbox class ( strange way )
Any way to combine these 2 types under one powering up normal working script ?
You should be able to do this:
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5',
current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}'});
$('img.colorbox').colorbox({href:function(){return $(this).src; }});
You could also do this:
$('.colorbox').colorbox({rel:'colorbox', opacity:'0.5', current: '$s_photo[$lid]: {current}, $s_total[$lid]: {total}', href:
function(){
return this.src || this.href;
}});
... how about this:
1 - group ALL images by some class selector
2 - use the onLoad callback to check for and set the href value for images that are not wrapped by a hyperlink