I'm using the most basic functionality of the Fancybox plugin. All renders fine in FF 3.5.9 & Chrome 4. Wouldn't you know it, IE 7 has a problem, it does not display the close box and doesn't honor the location of the title. You can see the problem here: [URL]
Click the Players tab and then click any thumbnail.
I'm using the JQuery validation plugin inside a Fancybox window. My contact form appears in the modal popup when the user clicks a link (loaded through an external .html file with the form code), but my problem is that the validation is always skipped and the form is always submitted.The weirdest thing is it works if I put an "alert('...');" before the validation code
[Code]...
I'm using Gravity forms for a fancybox popup here- hit the 'JOIN' button and you'll see the popup. What I need to do is close the popup when the submit button is hit and then redirect the parent page to a specific url. I cannot wrap the submit button itself in a link because I'm using Gravity Forms. Is there another way to do this?
View 2 Replies View Relatedi have a site that uses a lightbox based image viewer and the jeditable plugin. basically my site has a photo gallery and below each gallery i have the option to set a caption to the photo.
i have done the caption using jeditable and i've also tried using the ajaxForm plugin for jquery to see if jeditable caused the problem. but whichever method i use, approximately 20% of the time a photo caption is submitted, if you then click on the photo to view full size using lightbox (so far i've used fancyBox, prettyPhoto and Lightbox itself, and all break in the same way) it gets stuck at "loading", whereby the overlay appears, the inital empty box and animated gif appear, but then it just spins forever and never loads the image, as if it cant access the URL. weirder still, the FIRST time i do a page refresh to try and fix the problem, it doesnt work (something in the cache i expect), but if i do a second refresh or a shift + refresh, it resets and works again. it's very difficult to eliminate all variables because the problem is so sporadic, but it seems that the most likely way of breaking lightbox is to do the following:
[Code]...
Is there a way to force Fancybox to re-size after the Validation plugin returns an error message?
I have been trying to insert this into the process, but I cannot seem to get it work.
$.fancybox.resize;
I've been working on a freelance design site, and I have been using jshowoff and fancybox on my portfolio page. The portfolio has multiple sections that are set to be scrolled through using jshowoff by using the slide links. This use of jshowoff is working perfectly fine, but fancybox isn't. fancybox is supposed to be set to launch a modal when any of the portfolio thumbnail images are clicked. As it is right now, fancybox links will not work within the jshowoff slide div, but they do work outside of the jshowoff slide div.
I have done about 5 hours of searching online for possible fixed to my issue, and I haven't found anything. I am attempting to fix the conflict the between jshowoff and fancybox. I am very new to using jQuery plugins, so hopefully, you can all bear with me.If anyone may know how I can fix my fancybox links, so that fancybox will work within my jshowoff slide, I'd greatly appreciate it. I have provided the html below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
[code]....
On page load, the cycle is displayed above some content that should be below the cycle.
And after doing a page reload, the content is indeed pushed down and the display is then correct, with the cycle above said content.
I suppose it is due to a loading race condition, the images being loaded before or after the below content...?
I am calling a custom method to validate adate input element (this element is an array ). Upon validation, a message is displayed against each date input element, even if the others are valid. If one date element is invalid, all other valid date elements too show the message. How do I make sure that the error message is displayed only for the invalid element?
My formelement is defined as such:
<input name="order_date[ ]" size="10" type="text">
Here's the script:
<script type="text/javascript">
[Code]....
I'm currently usingMalsup's Cycle plugin. I am just wondering is it possible to have cycle plugin return the index number of the currently displayed slide? I want to change the content of the page when a specific slide is active. Don't know how to achieve that..
View 1 Replies View RelatedCycle plugin displays horizontally my vertical photos (photos taken with my camera in portrait position).The same photos are displayed vertically (the right way) by other imaging applications (e.g. Photoshop and Finder or Preview in OSX).The same photos are displayed horizontally (the wrong way) by Safari and Firefox (IE not tested). Cycle seems to rely upon browser poor orientation recognizion.how to make Cycle Plugin aware of the right photo orientation?
View 2 Replies View RelatedI would like to open an overlay DIV onclick or onload, much like thickbox or shadowbox does. Here's the hard part - I would like to have it animate and shrink it to the top right corner of the page when the popup is closed. The reason for this is so that the user will know how to get that popup window back open. The popup will animate and minimize to the top right of the page, where the button to re-open the popup (ie. overlay) will be located.
[url]- I would like the "current issue" graphic to be clickable and open the "subscribe" popup with an animation to zoom it from 0 to full size and center it on the page.
Safari 4.0.5 and FF 3.6.3 have this problem IE and Chrome are ok The first time when i click the link, two instances of close button shows. If during the same load, i click on another item, the previous clue tip hides and the new one shows with only one close button (right behavior). Image attached. Property closePosition "top and bottom" both have this behavior. closePosition value "title" only shows one close button but it is not clickable.
JS Code:
Code:
$('.RetrievePasswordForm').cluetip({
cluetipClass: 'rounded',
showTitle: true,
[code]....
You can see that when selecting 'Contact' from the top navigation a light-box (fancybox) with a contact form opens, this form can be filled and when the submit button is pressed the content of the form is emailed to myself. However.... The 'Thank you message' is not appearing in the light-box as I would like it to and I cannot work out how to do this.
View 2 Replies View RelatedI have a gallery on my site here:
[URL]
add a caption to the bottom of the images when they are clicked on and perhaps even a link?
My website [URL] works well in Firefox and Safari. But some of the JQuery function doesn't work in IE, e.g., Fancybox.
View 1 Replies View RelatedI've managed to open the login form in fancybox. When visitors login, the page opens in the i-frame itself. When they hit the close button of the fancy box, the parent page refreshes.Almost there but I would like to close the popup and refresh the parent page at one go with a proper function when a visitor hits the submit button
View 1 Replies View RelatedI use the fancybox plugin. I need the plugin with two setups (CSS and plugin itself changed a little) so I duplicated the script and made my changes to it. Now I want to use both script in the same page. Of course there is a conflict with function name, which is why I want to rename the function name of the one script to .fancybox2. But I can't seem to get it to work. I don't know which parts of the fancybox.js file I have to change. There are so many fn.fancybox's. I tried to change them all but it's not working. Any advise how this has to be done?
View 1 Replies View RelatedSo I have a script that retrieves images from Flickr and displays them on my site. I have Fancybox so that when a user clicks on the image, the picture will come up in a... "fancy box"... everything seems correct, but when I click on the image, it sends the user to the location of the picture on Flickr servers instead of opening it using Fancybox.
Here is the code for the Flickr retrieving...
<script type="text/javascript">
var FLICKR_ID = '41313008@N08';
var THUMBNAIL_HTML = '<a id="single" href="%IMAGE_URL%" title="%IMAGE_TITLE%"><img alt="%IMAGE_TITLE%" src="%THUMBNAIL_URL%" /></a>';
function displayImages(data){
var htmlString = "";
$.each(data.items, function(i,item){
var thumbnail = (item.media.m).replace("_m.jpg", "_s.jpg");
var large = (item.media.m).replace("_m.jpg", ".jpg");
htmlString += THUMBNAIL_HTML;
htmlString = htmlString.replace(/%IMAGE_TITLE%/g, item.title);
htmlString = htmlString.replace(/%IMAGE_URL%/g, large);
htmlString = htmlString.replace(/%THUMBNAIL_URL%/g, thumbnail);
});
$('#gallery').html(htmlString);
}
$.getJSON("[URL]", displayImages);
</script>
<a id="single" is the id that goes to open the image in Fancybox. When I disable this Flickr script, and input an image manually, it works 100%.
I have this simple gallery that loads images from an xml file and usesFancyboxto display the images. Demo Everything is working but the last image is not working with fancybox. The last image just displays in it's own window.
[Code]...
Somehow I can't get this to work on that page: [URL]...
View 2 Replies View RelatedI have the following problem: In wordpress I wanted to popup the login-page (wp-login.php) and i used the fancybox to generate an iframe. after clicking the "login" button i want that the fancybox is closing (thats not the problem) and i want to reload the whole page so that it recognizes that i'm logged in.
Now that is the problem .. I cant reload the index page when clicking the login button, because (i think so) the login document is in a iframe and is not able to reload the whole screen). I don't know the "reload" command, too, maybe load("index.php"); ? :D
I did a search of the forums, and this was the only thing I could come up that seems similar: [URL]. The last post in this thread tells me what I already know from my other research today - this function doesn't work in FF, Safari, etc.
Here's my code:
Code:
<script type='text/javascript'> window.onload = function()
{ setTimeout(function()
{ document.getElementById('popupLink').click();
}, $timeleft); }; </script>
Works great in IE, but nothing else. I'm using a jQuery gallery tool called fancybox, and from what I can gather, the popup of the gallery must be tied to a click on an anchor link.
On their support forums, one of their admins suggested that I use the following:
Code:
<script type='javascript'>setTimeout( function() {$
('#popupLink').trigger('click'); }, $timeleft);</script>
Still doesn't work (not even in IE). BTW, $timeleft is a var that is being created in PHP. I've checked the source code and it is counting down correctly.
I find that either of these plugins work in isolation but together they are clashing. The first to be specified in my initialisation code works, the following doesn't. Initialisation code looks like this:
// remap jQuery to $
// jQuery.noConflict();
(function($){
// Infinite Carousel
$('#carousel').infiniteCarousel({
'transitionSpeed' : 2000,
'displayTime' : 10000,
'textholderHeight' : .25,
'displayProgressBar' : 0
});
// Lightbox
$("a.lightbox").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true,
'titleShow' : false
});
})(this.jQuery);
Web pages:
Carousel working: [URL]
Fancybox not working: [URL]
I have a page that contains images, and those images are displayed in a fancybox window when they are clicked. Some of these images are loaded dynamically after the page loads via AJAX.
All of the images exist inside of link tags with class="challenge_image_gallery". The code works the way it should on the images that are initially loaded on the page. However, when the new images are loaded onto the page using AJAX, the fancybox window loads two instances of the image that was clicked on rather than one as it should.
Here's the code I'm using:
I have a function that dynamically creates links for a photo gallery. The function also produces a larger image as a background image of a div when and thumbnail is clicked on. What I want to do is have a third event, where if the user clicks the enlarged image in the div, the jQuery Fancybox loads an even bigger version of the image being displayed in the div. The problem is that the link for the anchor tag I'm using is created dynamically, and I know that Fancybox parses the HTML when the DOM is ready...unfortunately my function changes the DOM by appending the anchor tag for the full sized image. I need is using the Fancybox's options to specify the href attribute for the plugin.
jQuery:
function gallery(picid, picnum){
var ext = 'jpg';
var fullSize = 'imgs/'+picid+'_full.'+ext;
[Code].....
I have a drop down box. onChange of that drop down box the option selected is $_POSTed to a php page where I'm grabbing that name and using it in a form on the new page.
Instead of it opening a new window for the php page, I'd love to make it more aesthetically pleasing and use Fancy Box and jQuery to open a popup window over the page that has an iframe of the php in it.
My issue: I can't figure out how to have the modal popup open when the dropdown is selected. I don't want to have to use a button to trigger it. Any way to trigger the popup AND also POST to the php page onChange of the selection box?
