We Keep Coding

javascript for a simple lightbox seems not to be functioning

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.

lightbox2 plugin doesn't work?

I'm getting started with JS, jQuery and so the plugins. On my projects (2 of them), I included Lightbox2 plugin, and to my suprise, it works only on 1 of them. I have 'almost' exact code for galleries (almost stands for very little, unmeaning I hope differences). Here are parts of 'gallery' codes:
The working one:
<a href="gallery/lotchmiela1.jpg" data-lightbox="gallery">
<img border="0" src="gallery/small/lotchmiela1.resized.jpg">
</a>
<a href="gallery/lotchmiela2.jpg" data-lightbox="gallery">
<img border="0" src="gallery/small/lotchmiela2.resized.jpg">
</a>
and a not working friend:
<a href="photos/img01.jpg" data-lightbox="photos">
<img class="small" src="photos/small/img01-small.JPG">
</a>
<a href="photos/img02.jpg" data-lightbox="photos">
<img class="small" src="photos/small/img02-small.JPG">
</a>
well then, things I've tried:
switching data-lightbox="..." to rel="lightbox"
going from .JPG to .jpg (nvm)
checked the code, script tags 100 times
pretty much memorized Lightbox2 project site (I did everything there is, twice)
so, reminding you once again that I'm a JS noob, I await for every idea ;)

how to prevent fancybox from deleting the clicked thumbnail

Fist time using fancybox and it's not going so well.. starting to wish I didn't bother with it.
I have some thumbnails in a row, fine, then when I click one it opens the THUMBNAIL instead of the link whats worse it DELETES the thumbnail from the DOM. I've dug around in the fancybox src for the issue but there's a lot of it and I'll probably end up killing functionality so I thought I'd post here.
heres the code:
The raw HTML comes from CMS looking like:
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
I then run some stuff in backbone view render, the important bit is this:
var imgs = this.$el.find("img"); //:a jquery group of the img elements above
this.content = this.$el.find("span.postcontent");
//empty current
this.content.empty();
//make replacement
for(i= 0;i<imgs.length;i++)
{
var curImg = $(imgs[i]);
var curLink = $("<a/>");
curLink.attr("href",curImg.attr('data-orig'))
curLink.append(curImg);
curLink.on("click",function(e){
e.preventDefault();
$.fancybox.open(imgs)
});
this.content.append(curLink)
}
I now have rendered html like this:
<a href="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
So far so good... now, when I click the link/thumb it does the fancybox thinggy but shows the THUMBNAIL not the linked image, tiny in the middle in it's lightboxy thing and whats really annoying is that the clicked thumbnail in the page itself has now been completely removed from the dom ie.:
<a href="http://blah..blah..flickr..big..001_b.jpg">
///THIS IS MISSING COMPLETELY..... ggggggrrrrr
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>

I've never seen Fancybox used like that. Normally, you don't need to trigger $.fancybox.open like that. You can just bind fancybox() to the <a> tags.
HTML:
<a href="big-image.jpg" class="fancybox">
<img src="thumbnail.jpg">
</a>
JavaScript:
$('.fancybox').fancybox();
Try just using that function after you've got the DOM to look like that.
[edit]
I couldn't get your DOM manipulation to quite work, but I tested with this fiddle, and it seems to be working: http://jsfiddle.net/haRnQ/4/
NOTE: I didn't import the styles or images for the demo, so it will be unstyled, but it still works.

I'm answering and voting up the previous two because they both helped but were not the definitive answer. The documentation was not clear that if you use only the "group" as a jquery array you must also specify options therefore the correnct answer is to do this (passing two arguments):
$.fancybox.open(imgs,
{
href:this.href,
title:curImg.attr("title")
}
);

Try changing this
$.fancybox.open(imgs)
by this
$.fancybox({
href: this.href
});
because imgs is the collection of your thumbnails (all <img> elements), which are moved to fancybox on click but not moved back after close.
In any case I would recommend you to add a class to <a> otherwise any other anchor you may have in your page would try to open fancybox.

I believe Fancybox prefers wrapping your images in an anchor. This is important to note as Fancybox removes the anchor when activating a slide show to prevent clicking on the anchor when the modal is active.
Calling FB from the thumb behaves like you have experienced by deleting the thumb and not recovering it after the modal is closed.
This is my typical FB setup (not a thumb gallery):
<img src="image1.jpg" alt="" />
<div style="display: none">
...
</div>

JQuery larger image in dialog

I have a thumbnail image declared dynamically like this :
<img id="productThumbnail" src="" style="float: left; width:100%"/>
I want to open a larger image in a JQuery dialog when a user clicks the thumbnail.
How can I accomplish this ?
Considering in my array, the thumbnail is "productThumbnail" and the larger image is "srcImg"
Something like :
<a href="#" data-rel="dialog" id="dialog1">
<img id="productThumbnail" src="" style="float: left; width:100%"/>
</a>
Thanks !!

This is almost exactly what jquery lightbox can do for you...is there a reason you can't or don't want to use it or other smiliar plugin?
http://leandrovieira.com/projects/jquery/lightbox/

Maybe some of this Jquery Pluggins can help you.
(See the number 4).

Can you control the order in which images (hidden vs visible) on a web page are loaded?

If I have two divs, one shown, the other hidden, I want the images in the visible div to load first and only then for the other hidden images to load.
Is there a way to do this?
<div class="shown">
<img src="a.jpg" class="loadfirst">
<img src="b.jpg" class="loadfirst">
<img src="c.jpg" class="loadfirst">
<img src="d.jpg" class="loadfirst">
<img src="e.jpg" class="loadfirst">
</div
<div style="display:none" class="hidden">
<img src="1.jpg" class="loadsecond">
<img src="2.jpg" class="loadsecond">
<img src="3.jpg" class="loadsecond">
<img src="4.jpg" class="loadsecond">
<img src="5.jpg" class="loadsecond">
</div>

The browser should be requesting the images in the order that the markup lists them in. So it would ask for a.jpg, b.jpg, etc.
If you don't want the hidden DIV images to load with the page then you would have to insert that HTML from the client side once you want the images loaded.

As others have said, it all comes down to which images are listed first in the html markup.
But, something that may help with this problem is to display a loading spinner until all of your images are fully loaded.
You could do this with JQuery, as in this example.
http://jqueryfordesigners.com/image-loading/

Some, if not most, browsers do this automatically. If images are hidden then they are not downloaded.

If all the images are embedded within a single image map, then all images will load at the same time. That solves issue of the "literal load order". Thats a bit complicated though and a totally different issue that you might want to skip for now ( http://www.alistapart.com/articles/imagemap/ ).
But, for the "apparent load order" you start with a DIV with <DIV id="1" style="visibility: hidden"> option. Then use a for loop to change the visibility of the DIVs in order.
for (var=0;var<=10;var=var+increment) {
document.getElementById(var).style.visibility = 'visible';
}
Also, maybe an approach using layers: http://jennifermadden.com/javascript/dhtml/showHide.html
I think there are ways to dynamically load an additional CSS file (when you are ready to load images): http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS