Adding lightbox to tumblr doesn't work with theme

I've tried lightbox, fancybox, etc. but none of these lightbox function on my theme.

This is the one I'm using: http://vintage.themelantic.com/

And I wanted to make a "zoom" icon (which I did) that when you click on it you can see the post image in a lightbox like here ---> http://narniatheme.tumblr.com/

I added all the codes correctly but still doesn't work, it just loads the image on a new page. Anyone knows how I may be able to do this?

The only thing I was able to add was the "zoom" icon.

I took the codes from the code of "Narnia theme" but when I tried adding lightbox from 0 it didn´t work either. I searched the whole code to see if I missed something, I think I didn't but maybe I did jaja If I can add the ones from the Narnia theme it would be awesome. I placed them exactly in the order and place they had originally but on Vintage theme.

Here is Vintage theme code just in case: pastebin.com/embed_js/gz5s56T7

---->I added below <head>: <-------------

<meta name="if:Lightbox" content="1"/>

<script type="text/javascript" src="http://static.tumblr.com/ssdtkch/AhIlqr0kb/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ssdtkch/YP9ls3323/untitled.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/ssdtkch/EUjlqtc4s/jquery.fancybox-1.3.4.css" media="screen" />


---> Below </style><-------------

{block:iflightbox}
<script>
$(document).ready(function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
 
 
$("#various3").fancybox({
        'width' : '50%',
        'height'        : '30%',
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'type'  : 'iframe'
        });
});
</script>
 
{/block:iflightbox}


---- >Code for the posts:<-------------

{block:iflightbox}
<a id="single_image" href="{PhotoURL-500}" ><img src="http://27.media.tumblr.com/tumblr_lqr0e7QyrS1r0kskpo1_100.png" style="margin-left:3px; border:0px; width:24px; height:20px;cursor:pointer; float:left;" class="reblog_etc" alt=""/></a>
 
 
{/block:iflightbox}

Solution

So I've looked at your code and nothing worked. So I looked at your sources, figured out what you'd done and what you wanted and it's working now. Before I show you how to fix it, please be extra careful when copying scripts and css from different themes without looking at how they interact (or you might get very unexpected results).

So what happened is that you copied some scripts from various sources and they expected other scripts to be there so they crashed (resulting in your anchor tag being just a link to a photo in a new tab).

Please do the following :

Erase the whole HTML theme, paste the original Vintage theme again (let's start from scratch)
Around line 96 you'll have a  HTML comment (or search for it). Paste the following just on the next line :
```

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<meta name="if:Lightbox" content="1">
```
This will add the Fancybox library's CSS from an open source (it's easier than uploading the file to tumblr), upon which your lightbox is based.

Search for . That's the black pane appearing when you hover on the picture. You'll see a <div class="thumb-icons"> there, containing the Reblog and Like buttons. After these two, but still inside the thumb-icons div, add :

<!-- Lightbox-->
{block:iflightbox}
{block:Photo}
<div class="thumb-icon">
    <a class="fancybox" href="{PhotoURL-500}" ><img src="http://27.media.tumblr.com/tumblr_lqr0e7QyrS1r0kskpo1_100.png" style="margin-left:3px; border:0px; width:24px; height:20px;cursor:pointer; float:left;" class="reblog_etc" alt=""/></a>
</div>{/block:Photo}
{/block:iflightbox}

This will add your zoom icon on all Photos (not photosets though) when you hover on them.

Search for . Amidst these scripts, but after the three first (jquery.min.js, jquery.infinitescroll.js and vintage.js), add :

<!-- Lightbox-->
{block:iflightbox}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>
{/block:iflightbox}

This will import the Fancybox script and initialize it (which wasn't happening in your code).

Final step : update the preview, save the theme and toggle the "Lightbox" setting in your theme preferences (where you might have to edit your colors again I'm afraid), maybe off and on. Update the preview and check that the zoom icon is there and that the magic happens when you click.

There's of cours a lot you can edit and customize now but I think it's easiest if you refer to Fancybox's official page : http://fancyapps.com/fancybox/

Please tell me if it works now and have a great day!