JQuery :: Add A Caption To Images - FancyBox
Oct 17, 2011I 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?
I 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?
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'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]....
I want to create a gallery of images with a fancybox-esque style but incorporate the "folder functionality" that this site has: [URL] In other words: When I click on an image I want it to expand to "fullscreen". (This I can manage with fancybox.) What I can't work out how to do is display more images from the same photo-session at the bottom of the fullscreen.
View 1 Replies View RelatedYou 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 cannot work out why this doesn't work.
$(document).ready(
function(){
// Actual jQuery goodness that moves the captions
// Set the default value for the caption
$('.boxcaption').live('click',
function(){
console.log(this);
});
});
When I run the following and click on a .boxcaption element. It returns the this value 15 times, once for each .boxcaption that is on the page. I only want to return one value, which is the one I have clicked on.
Ive used this tutorial code...
But when I hover over the Wrapper DIV the Description DIV also fades.
I want the Description DIV to remain at 100 opacity even when I hover over the wrapper.
Is that possible?
is the <caption> Tag inside a Table supported? An if yes, how can i read the text inside this tag?
View 1 Replies View RelatedI'm setting up a web page and think jQuery will be able to sort this out for me.
I have an unordered list (5 items so far, but a few more may need to be added). On clicking on any of the items I need three things to happen on the page:
1. place a picture into a div
2. place a caption into another div
3. place a title into a third div
Clicking on a second item needs to hide these and show that item's related three bits.
So, is jQuery/javascript my best tool, how I can achieve it?
I am using the jquerry cycle to create a rotation banner with a caption/title within a CMS everything is working properly. the problem is that on the next step i need to make the caption color change according to the captionis there a way to control that? this is my code so far
[Code]...
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'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 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'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 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?
New to javascript/jquery, been trying to create a rotator which displays a large image with caption and uses next/previous button and thumbnails for control. Everything works fine but when the rotator gets to the last item i'd like it to go back to the first, and when the previous button is clicked at the first item I'd like it to go to the last.
$(document).ready(function() {
//set to zero
var x = 0;
[code]....
i 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;