I'm new to programming unfortunately and so to help me I have been following some simple tutorials on youtube (in addition to following Treehouse lessons). The one I have been struggling with and can't seem to find a solution to is building a simple lightbox, well getting the click event to bring up the lightbox. I have checked all lines, syntax, whether I've omitted a ; or {}, thought maybe I had the javascript src incorrect, tried downloading, creating a js folder and linking to that, referencing google hosted javascript, checked firebug, tried different browsers, checked that the CSS is correct (which it seems to be as when setting the display to block it appears OK), thought maybe there is updated syntax rules (tried jQuery instead of $ but just can't see where I'm making an error. Probably I have omitted something really simple, so please forgive me in advance. The youtube link I'm following is: https://www.youtube.com/watch?v=k-uonF7Gdgw Have also checked the comments to the video to see if anyone else is having same problem, some are, but mostly everyone else seems ok, and no solutions posted for those not getting it to work!
Please see below code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.lightbox').click(function(){
jQuery('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); //fades in the backdrop and the lightbox - speed of 300, and displayed in a linear fashion. Only want the backdrop displayed with 50% opacity, and the box at 100% (see below line)
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('dispaly', 'block'); //sets the appearance of the box
});
});
</script>
Many thanks in advance, and thanks for great resource!
Nic
Lightbox is a JavaScript technique used to display images and other web content using modal dialogs where the image is shown up center filling most of the screen, and the rest of the window is dimmed out. Lightbox was originally the name of a specific JavaScript plugin. However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and effects in general.
First we take some images (when we click on the images the LightBox will be shown). We will place this image in a
HTML code:
<section id="examples" class="examples-section">
<div class="container">
<h3 style="clear: both;">Four image set</h3>
<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
</div>
</div>
</div>
</section>
Now add css code files for screen and lightbox. Also download lightbox.js and jquery library java-script files.
I am creating a photo gallery with different drop down menus containing separate categories. Everything works great, except that when I test the gallery page all the images are visible while they load, and then once they're fully loaded they disappear into their said categories (as it should be to begin with). My question is this...
Is there a way to hide all the photos until someone clicks and expands a menu option? Or perhaps a better way to go at this all together?
Here is a link to the gallery site... http://wayhigh.we.bs/Fireball%20Site/gallery.html
Here is a sample of the html...
<div class="wrapper">
<div id="st-accordion" class="st-accordion">
<ul>
<li>
Functional<span class="st-arrow">Open or Close</span>
<div class="st-content">
<a class="fancybox-thumb" rel="functional" href="images/wyzeguy.jpg" title="Wyze guy rigs">
<img src="images/smallwyzeguy.jpg" alt="" />
</a>
<a class="fancybox-thumb" rel="functional" href="images/dragon.jpg" title="Dragon">
<img src="images/smalldragon.jpg" alt="" />
</a>
</div>
there are several of these menu items...
script for the accordion menu...
$(function()
{
$('#st-accordion').accordion(
{
oneOpenedItem : true
});
});
$(document).ready(function()
{
$(".fancybox-thumb").fancybox(
{
prevEffect : 'none',
nextEffect : 'none',
helpers :
{
title :
{
type: 'outside'
},
thumbs :
{
width : 50,
height : 50
}
}
});
});
Is there a better solution than what I've come up with? Or a way to stream-line my solution?
Thanks for the help.
I think a simple way of hiding the photos till load would be to make them display:none until the document is ready. Create a class in the css called hidden and give it the styling of display:none. Add the class to all the images.
Then in the $(document).ready call add a line as the fancybox callback or after you setup the fancy box that looks like, $("img.hidden").removeClass("hidden");.
I'm having the strangest problem with jQuery's hide() and show() functions.
The site I'm working on (development build) is here
On the page, you'll see a product under Featured Products called Hydrate. This product has some flavor options so what I want to do is make it so that when the user clicks the Add to Cart button it shows a layer that is by default hidden. See the two screen shots here:
However, when I click the Add To Cart button, the layer does not appear. The Firebug screenshot below shows what the elements look like after I've clicked the Add To Cart button.
Notice that the element style is "display: block" as per the jQuery norm, which then should override the CSS element style for "display: none". I've done this hundreds of times, if not more and this is the first time it hasn't worked. Now look at the Firebug screenshot below. If I click the red slash-circle next to display:none in the debug console, the layer appears exactly as it should.
Below are the snippets of what I believe are relevant code, but I can't see where the problem is.
CSS Code:
.carouselProduct {float:left; border:2px solid #e9e9e9; width:223px; min-height:242px; margin:18px 2px 0 2px; position:relative; overflow:hidden;}
.productOptions{
position:absolute;
bottom:0px;
left:0px;
width:211px;
background: url('../images/black_background_75.png');
z-index:99999;
padding: 6px;
height:170px;
display:none;
}
JS Code:
$(document).ready(function(){
$.noConflict();
jQuery('.add_to_cart_btn').live('click',function(e){
e.preventDefault();
$(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'} });
});
jQuery('.choose_options').live('click',function(e){
e.preventDefault();
jQuery('#options_'+jQuery(this).attr('rel')).show();
});
});
Note: I thought maybe there was some way that something was interfering so I implemented noConflict but it didn't make any difference. Also note that I'm not getting ANY JS errors in Firebug.
HTML Code:
<article class="carouselProduct">
<!--productContent starts here-->
<article class="productContent">
<img class='productImage' src="/uploaded/thumbnails/db_file_img_33_autox126.png" style="margin: 3px;">
<hgroup>
<h4>Hydrate</h4>
<h3>$25.00</h3>
<h3 class="orange">$15.00</h3>
</hgroup>
<strong>Key Benefits:</strong>
<ul>
<li>Proper electrolyte balance</li>
<li>Reduce muscle fatigue & cramping</li>
</ul>
</article>
<!--productContent ends here-->
<!--productOptions layer starts here -->
<div class="productOptions" id="options_1">
<div class='selectbox1'>
<label>Flavor</label>
<select class='my-dropdown' name='product_options[4448804864d703e8b696c3fa7713aa23]'>
<option value='Fruit Punch'>Fruit Punch</option>
<option value='Orange'>Orange</option>
</select>
</div><br>
<article class="product_btn">
<a class="yellow_btn" rel="1" title="Add To Cart" href="#" onclick="return $(this).getForm().sendRequest( 'shop:on_addToCart', {update: {'mini_cart': 'mini:cart'},onSuccess: function(){ close_layer(1) } })">Add To Cart</a>
<a class="gray_btn" title="View More" href="#" onclick="close_layer(1)">Cancel</a>
</article>
</div>
<!--productOptions layer ends here -->
<!--product_btn starts here-->
<article class="product_btn">
<a class="yellow_btn choose_options" title="Add To Cart" href="#" rel="1">Add To Cart</a>
<a class="gray_btn" title="View More" href="/shop/product/intensity-hydrate">View More</a>
</article>
<!--product_btn ends here-->
</article>
Note that there are two Add To Cart buttons. Only the last one in the code here (the one that shows up initially) has the "choose_options" class on it. Also, on the Cancel button inside the overlay, I have call to a function called close_layer that passes the id in and then runs the jQuery hide() function which also doesn't work.
I've tried everything I can think of. I've disabled other JS and CSS and still it doesn't work. I've console logged everything and added alerts. It IS running the function because it adds the element display style to the hidden div but something isn't letting it override the CSS file.
Any help would be greatly appreciated.
On your page, there are more than one divs has the same ID - 'options_1'. So your code only change one of them. If you do want to show all of them, then you can do it as below:
jQuery('div[id=options_'+jQuery(this).attr('rel')+']').show();
The issue i feel is being cause by specificity
element.style has higher specificity compared to .productoptions because the property is part of the style attribute
Even if you apply the class to the element element.style will be given preference. .
The better option for you is to Remove the style attribute from your HTML..
Add the display:block inside a class..
.block
{
display : block;
}
<div id="options_1" style="display:block">
should now look like
<div id="options_1" class="block">
Now use .addClass() and .removeClass() to specify your logic.
It seems your DOM is messed up. Perhaps you have a missing tag somewhere or something?
Anyway I visited your page and when I change:
jQuery('#options_'+jQuery(this).attr('rel')).show();
to
jQuery('#options_'+jQuery(this).attr('rel')).show().appendTo(jQuery(this).parent())
everything is fine.
I had a similar problem and after debugging found that I had forced 'display: inline-block !important' in one of the places which was overriding my hide(). Could you check if the !important is used anywhere in the CSS that can be related?
I have an "attached files" container in a project I'm working on which shows thumbnail images of files that have been attached to a specific event. When a user clicks a thumbnail, a fancybox window opens up to show them a larger preview of the attached image or text file.
Right now, my solution consists of setting the fancybox type to iframe, like so:
$(".fancybox_group").fancybox({
type : 'iframe'
});
This will display both text files and images just fine, but the images have this giant white border around them. I did some searching on google and found this solution, but it doesn't work for me. This simply creates two separate fancybox instances; one for images, and one for iframes. I would like to be able to scroll through all of the attachments in one gallery. Is this possible?
Here is an example on jsfiddle showing what I'm trying to achieve. I borrowed the code/images from a fancybox example and added another thumbnail link to a text document. This is how I have it set up in my project. Any insight would be greatly appreciated.
You are using fancybox v2.0.6 so other solutions may be obsolete.
To achieve what you want is simple, just do:
1). Load all javascript files in this order:
jQuery
Fancybox js file
Fancybox media js file (you find this within the helpers directory)
2). Load the fancybox css file
3). Set the html for each type of object you want to open in fancybox like:
Images :
<a class="fancybox" data-fancybox-group="gallery" href="image01.jpg"><img src="image01thumb.jpg" alt="" /></a>
<a class="fancybox" data-fancybox-group="gallery" href="image02.jpg"><img src="image02thumb.jpg" alt="" /></a>
If the href of your images is something like href='/attachments/76' fancybox won't know it is an image because the lack of extension (jpg,png,gif). Add the class fancybox.image to your html like :
<a class="fancybox fancybox.image" data-fancybox-group="gallery" href="/attachments/76"><img src="thumb76.jpg" alt="" /></a>
Ajax content (html or txt files) :
<a class="fancybox fancybox.ajax" data-fancybox-group="gallery" href="sample.html">open ajax 1</a>
<a class="fancybox fancybox.ajax" data-fancybox-group="gallery" href="sample.txt">open ajax 2</a>
(notice the second class fancybox.ajax ... also, you could use thumbnails instead of the text in my example)
External pages via iframe :
<a class="fancybox fancybox.iframe" data-fancybox-group="gallery" href="http://domain.com/page.html">open page in iframe mode</a>
<a class="fancybox fancybox.iframe" data-fancybox-group="gallery" href="http://other.com/page2.html">open other page in iframe mode</a>
(notice the second class fancybox.iframe)
Youtube videos :
<a class="fancybox" data-fancybox-group="gallery" href="http://www.youtube.com/watch?v=2matH4B9bTo">open youtube video</a>
(notice that we don't need to add any additional class since we are using fancybox media helper)
NOTE: we are using the data-fancybox-group="gallery" attribute to set all the elements within the same gallery (you should set a HTML5 DOCTYPE though)
Finally, simply use this script:
$(".fancybox").fancybox();
You may want to add other API options like:
$(".fancybox").fancybox({
// other API options
padding: 0 // optional etc.
});
If you additionally want to use the buttons or thumbnails helpers don't forget to load the proper js and css files. Also add the helpers options to your script like:
$(".fancybox").fancybox(
helpers : {
buttons : {},
thumbs : {
width : 50,
height : 50
}
}
});
LAST NOTE: this is fancybox v2.0.6+
I'm using Fancybox to display inline content (a div with an image linked to a new page). The div and image display fine in the modal, but when the image is clicked to go to the new page, I get "The requested content cannot be loaded. Please try again later." error.
The FancyBox javascript is as follows:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox().hover(function() {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave( function() {
$("#fancybox-overlay").click();
});
});
</script>
And applies to the following clip of HTML:
<li class="fancybox-outer">
<a id="inline" href="#hover-image_0" class="fancybox">
<img src="http://website.com/file/id:63" style="margin-top: 32px" />
</a>
<p>1G2A</p>
<div style="display: none;"><div id="hover-image_0"><img src="http://website.com/file/id:64/ext:.png" class="img" /></div></div>
</li>
<li class="fancybox-outer">
<a id="inline" href="#hover-image_1" class="fancybox">
<img src="http://website.com/file/id:60" style="margin-top: 32px" />
</a>
<p>17</p>
<div style="display: none;"><div id="hover-image_1"><img src="http://website.com/file/id:61/ext:.png" class="img" /></div></div>
</li>
Does anyone see what might be causing the issue or what I need to correct?
Thanks!
Update: 1/19/2012 - I performed the same test on my server as the first answer (http://estorkdelivery.com/example/example.html) and found that I got the same response back. So it seems it's something with my server.
I still need help with this issue. Anyone have any ideas?
Thanks!
Update: 1/28/2012 - I've been working to find a solution for this problem, but I've run out of time and have gone with a completely different solution. I'm keeping this problem open in case anyone else runs across the same error or ultimately finds a solution. Thanks!
Your approach has many issues:
First bear un mind that fancybox gets its content from the href attribute of any selector bound to it so the link
<a class="fancybox" href="{target}" ...
should be bound to fancybox via the following script in order to work
$('.fancybox').fancybox();
Pretty obvious but in your approach, the link inside the opened fancybox (which targets to yahoo for instance) is not bound to fancybox itself; it will try to fire Fancybox for sure again but with no indication of what the content should be this time, hence the error "The requested content cannot be loaded. Please try again later." in other words, the link (inside the inline content) <a href="http://yahoo.com" ... is not bound to fancybox.
The only way that links inside fancybox can work and load content dynamically (without being bound to fancybox) is when the current content is an external html document and fancybox type was set to iframe (not your case)
Second, you opened an image so fancybox set the type to image by default, but then you are pretending to load a different type of content on the same box (yahoo for instance), which would require to set type to iframe and other options like width and height.
Third, since you are using inline content, please be aware of an existing bug in v1.3.x and its workaround to avoid further issues, you can learn more here
Last, I am not just lecturing here, it's more like the explanation of what is going on with your issue .... but the good news is that you just need to add some more lines of code to make it work the way you want:
1: you need to create a fancybox script for each type of content you want to open the second time (additionally to your existing one), so in your example you want to click the image inside fancybox and that should open yahoo ... then create this script
$('.fancyframe').fancybox({
'type':'iframe',
'width': 600, //or whatever you want
'height': 300
});
2: within your hidden inline content set that class to the link, so this code:
<div style="display: none;">
<div id="hover-image_0">
<img src="1_b.jpg" class="img" />
</div>
</div>
now should look like
<div style="display: none;">
<div id="hover-image_0">
<a class="fancyframe" href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
</div>
</div>
Do the same for each hidden inline content. If you want to open another type of content in fancybox, just create a script accordingly. The rest of your code is OK (doesn't bother me to fire fancybox on hover)
SIDE NOTES: sites like google, yahoo, jquery and some others won't open in fancybox. Also make sure you have the proper DOCTYPE for fancybox to work properly (your sample page doesn't have any). See Unable to load google in iframe in fancybox for explanation.
I think I've figured out what's causing this issue, at least for me.
The problem seems to occur when you've got a class on one of your elements that is the same as the popup class.
For instance:
<a class="popup" href="#">Open the popup</a>
And you have something in your popup with the same class name, for instance:
<div class="popup">some text</div>
You'll get the error. Try changing the div class to something like popup-window - that should fix your error
In your example page, it works for me if I don't click. When you click, what page are you supposed to be taken to? Do you want it to just go to the next image?
In my personal preference, I don't care for the activation on hover. It gets really confusing, especially when most people go to instinctually click on an image. But in your case it opens on hover, then they click instinctually, then you get the error.
Do you get this same error when you're just using the functionality as it normally applies?
If you want, try to give each image a gallery name instance like so: rel="gallery" and see what happens. You should get the next/prev arrows showing up and working like you would expect.
But honestly, I would get rid of the hover functionality altogether. Or at least get rid of the mouseout() That's probably the most bothersome part.
Just use this to call the fancybox actions:
$("a[rel=gallery]").fancybox();
That way you can get rid of all of those classes that are probably causing the issues.
I hope that helps.
I just ran into this issue as well.
As it turns out, the href url is EXTRA case sensitive. (if that is possible)
Regardless double, triple check your href urls to insure that you have the case exactly correct.
my solution was:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".fancybox").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'titleShow' : false,
'showCloseButton': true,
'titlePosition' : 'inside',
'transitionOut' : 'none',
'title' : '',
'width' : 640,
'height' : 385,
'href' : this.href,
'type' : 'iframe',
'helpers' : {
'overlay' : {'closeClick': false}
}
});
return false;
});
});
</script>
If some of the images are showing and others are not, even though the markup is identical, then check this:
Try to lowercase all the letters in the filename and in the html. Fancybox seems to be quite case sensitive.
Check if the image has all the permissions allowed. I noticed my pictures didn't work properly on mobile because on my computer, everybody's permission was set to "no permission". I changed this to "read only" and it worked like a charm!
I just re-created your test on my local machine and it works fine for me (I ran this from the demo folder of the FancyBox install) :
<html>
<head>
<title>jQuery Fancybox Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function () {
$(".fancybox").fancybox().hover(function () {
$(this).click();
});
$("#fancybox-outer").fancybox().mouseleave(function () {
$("#fancybox-overlay").click();
});
});
</script>
<li class="fancybox-outer"><a id="inline" href="#hover-image_0" class="fancybox">
<img src="1_s.jpg" style="margin-top: 32px" />
</a>
<p>
Go to Yahoo</p>
<div style="display: none;">
<div id="hover-image_0">
<a href="http://www.yahoo.com">
<img src="1_b.jpg" class="img" />
</a>
</div>
</div>
</li>
<li class="fancybox-outer"><a id="inline" href="#hover-image_1" class="fancybox">
<img src="2_s.jpg" style="margin-top: 32px" />
</a>
<p>
Go to Google</p>
<div style="display: none;">
<div id="hover-image_1">
<a href="http://www.google.com">
<img src="2_b.jpg" class="img" /></a></div>
</div>
</li>
</body>
</html>
I having the same problem with Fancybox. You cannot have spaces or special character in href and div id. Use an URL slug if you are using page titles.
I was checking out all the possibilities and ran into the EXTRA case sensitivity issue as #BrettBumeter mentioned.
In fact, it is "so much case sensitive", I had to revrite the URL (href) path to my images from *.jpg to *.JPG (or whatever your file type extension might be).
Altering this solved my issue.
Don't apply the fancybox class to your LI element, do it to your A element.
I, after taking the above advice, changed ".png" to ".PNG" in the href. NOTE that the file names are a lower case extension but it only works with upper case extension in the href (rest of filename same)
Hope this helps.
My problem was giving inappropriate path to image e.g;
<a data-fancybox="gallery" href="../dist/imgs/nature/n1.png">
<img src="../dist/imgs/nature/n1.png"></a>
While the images loaded well locally, It could not do online.
Correcting the path solved the problem.
<a data-fancybox="gallery" href="imgs/nature/n1.png">
<img src="imgs/nature/n1.png"></a>
If you are trying to make Fancybox work with dynamic content, you may check this.
I was using the following code:
<a class="video__overlay" data-fancybox="gallery" href="<?= $blog_url ?>"></a>
My issue was that I was generating $blog_url dynamically, looking at a specific text file line, so a \n was being added at the end of $blog_url, without me noticing this.
So, I used trim() and everything works as expected.