I have a few Pretty Photo images in my app, but they are opening in a new page instead of in a PrettyPhoto display.
Here's the index of my app, which is stripped down of everything not nescessary to run it.
Click the down arrow in order to view the pretty photo page.
I use the jQuery version from the download. Also PrettyPhoto and it's script are initialised right before the closing div tag.
What could possibly be wrong with it? Why are the images opening in a new page?
Thx in advance!
It's because you are calling the plugin once the document is loaded but not after clicking on the down arrow.
If you go to your site. Click on the down arrow. Open the js inspector and copy/paste this
//jQuery.noConflict();
jQuery(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
social_tools: false,
theme: 'light_square'
});
});
You will see it's working.
So try to trigger the prettyPhoto once the pictures are loaded.
Related
I am using the fancybox plugin for my web app. I am using it to display a simple tutorial for a first time user. When you first use my app you see the tutorial automatically. I use JQuery to trigger the link to open the modal once the page loads.
jQuery to trigger:
$(document).ready(function() {
$('#tutorial').trigger('click');
});
My link that opens the fancybox modal:
<a id="tutorial" href="#profile-tutorial" class="fancybox-open"> Profile Tutorial </a>
Now, when the page loads it automatically pops up, but some reason it loads halfway down the page. But if I click the link directly, it loads in the middle just fine. I have no idea what could be causing this. What could it be?
Thanks!
Trigger the click on load should solve your problem:
$(window).load(function () { $('#tutorial').trigger('click'); });
I am redesigning a webpage that has an image slider on the top to show some of my featured work. The image-slider works fine and works by clicking the right or left arrow for the next or previous image.
All was well until I added the links to the fancyBox files so that other images (not in the slider) in that page could be viewed in the pop-up fancyBox.
fancyBox works fine, but because of it my slider now disappears once one clicks the left or right arrow.
Can someone please help me fix the slider, or fancyBox, so that both the slider scripts and FancyBox work on this page?
Here is a link to the webpage
In the source I have also noted which files in the are part of the slider and which are for FancyBox
I would really appreciate any and all help!
Thanks in Advance,
theirf
See an error when stepping through in Firebug:
When I called show(slide,[object Object]) with your args, an error was thrown!
TypeError: f.easing[i.animatedProperties[this.prop]] is not a function
[Break On This Error]
...e)});else for(var g in a)ca(g,a[g],c,e);return d.join("&").replace(bD,"+")}}),f....
Caused by $("#pic-" + next).show('slide',{direction: dir});
where 'dir' is an empty string. Believe this is causing your error.
You also have a few other issues...such as hiding before showing. Check out more jQuery anim stuff or..simpler use a pre-built slider :)
It looks like you are loading two different versions of jQuery. One in the header(1.7), the other is in the top of m.js(1.4.2). Try taking that copy of 1.4.2 out of m.js to start. Make sure to check your console for errors, then go from there.
Also, I'm not all that sure about the slider script you are using. I have used BxSlider with fancyBox on the same page before, and they play great together... Just an idea.
Currently a lightbox is triggered when a visitor clicks a certain link on my page. However, as an introduction to new users I'd also like to show the lightbox when a visitor loads a page.
I've been looking into click events, but I can't seem to get it to work. Could somebody please point me in the right direction?
The site is located on http://wandree.websites.xs4all.nl/test, and the lightbox is currently triggered when you press the image of the tv located in the sidebar.
Thanks for any help!
Try this in the head section of the page:
$(document).ready(function(){
// Call the lightbox function.
});
I'm using shadowbox js for showing Flash video in lightbox style popups.
So far it's working but I have this problem:
when the page loads and the user clicks too early on the linked image which should open the
shadowbox the swf is loaded directly (and no popup appears).
Also, the script seems to stop in this case and never assigns the right clicklistener - so the shadowbox is never shown also on subsequent clicks.
Shadowbox 3.0.1
Anybody has experienced the same issue, any solutions?
Thanks.
You didn't post any info on when is the shadowbox first called.
If my guess is correct, You are running shadowbox in an onload event handler.
Try calling it when DOM is ready.
jQuery:
$(document).ready(function(){
//call it here
});
[EDIT]
In response to Your comment.
If this doesn't help there is only one solution.
Add this just after the line loading jquery script in head
<script>
$('<div></div>')
.css({width:'100%',height:'100%',
'position':'fixed','top':'0px',left:'0px',
'z-index':'10000'})
.addClass('cover');
.prependTo('body');
</script>
The above should be one line, but then it's being cut by the stackoverflow's CSS ;)
and then $('.cover').remove(); when You are sure everything is loaded.
I do that when running crazy lots of code on pageload ;)
If you visit here: http://www.egyptevakantie.nl/dahab, click on the "andere plaatsen" tab, and then click on an image it brings up a magnified image, courtesy of the jQuery lightbox plug-in.
However, if you do the same here http://www.egyptevakantie.nl/dahab?rhys=yes (essentially the same site except for a couple of stylesheets and one or two minor html changes, none of which are in close proximity to the images) the lightbox fails. Instead of overlaying the content the lightbox is appended to the bottom of the page, where it is also displayed weirdly.
So far in debugging I've managed to work out that the plug-in still calculates the correct left and top values for where to place the lightbox, but by the time the dhtml is generated the top value has changed completely.
Does anyone have any idea why this is happening?
I think you are missing the jquery lightbox stylesheet file.
in the first page there is a reference to this css file:
/css/jquery.lightbox-0.5.css
but on the second link there is no reference to this file.
this css file is included in the jQuery lightbox download located here:
http://leandrovieira.com/projects/jquery/lightbox/
If image is appended at bottom page, for sure postion:absolute is not set.