Since I posted that, I found the time I needed to test one of my other ideas. And I saw your other thread about addthis. So I decided to combine the two and it appears to work. I also discovered that the addthis code has to think it's on your domain in order to work properly. That's probably due to the hash:
#pubid=ra-4ff5721a4e9875e3
added to the src attribute for the addthis script hosted on their server. I was able to get it to think that by using a base tag, which I've not included in the demo below because if you put it on your server, it will be fine without it.
What I did was to make a slight alteration to lightbox.js that allows its functions to be controlled and/or replaced globally from outside the script. I could have edited it more extensively, but I wanted to allow it to function normally if used alone. At the end of lightbox.js, it has:
Code:
$(function() {
var lightbox, options;
options = new LightboxOptions;
return lightbox = new Lightbox(options);
});
}).call(this);
I changed that to:
Code:
$(function() {
var lightbox, options;
options = new LightboxOptions;
return this.lightbox = new Lightbox(options); // altered to place the lightbox instance in the document's scope (document.lightbox)
});
this.Lightbox = Lightbox; // added to allow access to Lightbox in the global scope - jds
this.LightboxOptions = LightboxOptions; // added to allow access to LightboxOptions in the global scope - jds
}).call(this);
I also added this comment (highlighted) near the top:
Code:
/*
Lightbox v2.51
by Lokesh Dhakar - http://www.lokeshdhakar.com
For more information, visit:
http://lokeshdhakar.com/projects/lightbox2/
Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
- free for use in both personal and commercial projects
- attribution requires leaving author name, author link, and the license info intact
Thanks
- Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.
- Artemy Tregubenko (arty.name) for cleanup and help in updating to latest proto-aculous in v2.05.
* Jul 19th 2012 - Unofficial update - place Lightbox functions in the global scope - John Davenport Scheuer (jds)
Table of Contents
=================
LightboxOptions
Lightbox
- cons . . .
That allows this demo to work:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="http://likebreathing.com/exp/lb.css" type="text/css" />
<link rel="stylesheet" href="http://likebreathing.com/exp/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="http://likebreathing.com/images/favicon.ico" />
<script src="http://likebreathing.com/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://likebreathing.com/exp/lightbox.js" type="text/javascript"></script>
<script type="text/javascript">
Lightbox.prototype.start = function($link) {
var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
$(window).on("resize", this.sizeOverlay);
$('select, object, embed').css({
visibility: "hidden"
});
$('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
this.album = [];
imageNumber = 0;
if ($link.attr('rel') === 'lightbox') {
this.album.push({
link: $link.attr('href'),
title: $link.data('caption')
});
} else {
_ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
for (i = 0, _len = _ref.length; i < _len; i++) {
a = _ref[i];
this.album.push({
link: $(a).attr('href'),
title: $(a).data('caption')
});
if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
}
}
$window = $(window);
top = $window.scrollTop() + $window.height() / 10;
left = $window.scrollLeft();
$lightbox = $('#lightbox');
$lightbox.css({
top: top + 'px',
left: left + 'px'
}).fadeIn(this.options.fadeDuration);
this.changeImage(imageNumber);
};
Lightbox.prototype.updateDetails = function() {
var $lightbox,
_this = this;
$lightbox = $('#lightbox');
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
$lightbox.find('.lb-caption').empty().append(this.album[this.currentImageIndex].title.clone(true)).fadeIn('fast');
}
if (this.album.length > 1) {
$lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + ' ' + this.album.length).fadeIn('fast');
} else {
$lightbox.find('.lb-number').hide();
}
$lightbox.find('.lb-outerContainer').removeClass('animating');
$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
return _this.sizeOverlay();
});
};
jQuery(function($){
var $addthisdiv = $('<div style="display: none;"></div>').appendTo('body'),
$triggers = $('a[rel^=lightbox]');
$triggers.each(function(i){
var $cap = $('<div class="addthis_toolbox addthis_default_style" addthis:url="' + this.href + '"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_pinterest_pinit"></a><a class="addthis_counter addthis_pill_style"></a></div>');
$triggers.eq(i).data('caption', $cap);
$addthisdiv.append($cap);
});
window.addthis_config = {'data_track_addressbar':true};
$('<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ff5721a4e9875e3"><\/script>').appendTo('body');
});
</script></head>
<body>
<a href="http://likebreathing.com/india/091_india.jpg" rel="lightbox"><img src="http://likebreathing.com/india/t091_india.jpg" alt="India Landscape" /></a><br>
<a href="http://likebreathing.com/india/146_india.jpg" rel="lightbox"><img src="http://likebreathing.com/india/t146_india.jpg" alt="India Temple" /></a>
</body>
</html>
Once we get that working for you, I think you can easily see how to set it up to work with your full page of images.
Remember, it needs the updated copy of lightbox.js which I'm also attaching here (right click and 'Save As'):
Attachment 4556
This code from the demo:
Code:
Lightbox.prototype.start = function($link) {
var $lightbox, $window, a, i, imageNumber, left, top, _len, _ref;
$(window).on("resize", this.sizeOverlay);
$('select, object, embed').css({
visibility: "hidden"
});
$('#lightboxOverlay').width($(document).width()).height($(document).height()).fadeIn(this.options.fadeDuration);
this.album = [];
imageNumber = 0;
if ($link.attr('rel') === 'lightbox') {
this.album.push({
link: $link.attr('href'),
title: $link.data('caption')
});
} else {
_ref = $($link.prop("tagName") + '[rel="' + $link.attr('rel') + '"]');
for (i = 0, _len = _ref.length; i < _len; i++) {
a = _ref[i];
this.album.push({
link: $(a).attr('href'),
title: $(a).data('caption')
});
if ($(a).attr('href') === $link.attr('href')) imageNumber = i;
}
}
$window = $(window);
top = $window.scrollTop() + $window.height() / 10;
left = $window.scrollLeft();
$lightbox = $('#lightbox');
$lightbox.css({
top: top + 'px',
left: left + 'px'
}).fadeIn(this.options.fadeDuration);
this.changeImage(imageNumber);
};
Lightbox.prototype.updateDetails = function() {
var $lightbox,
_this = this;
$lightbox = $('#lightbox');
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
$lightbox.find('.lb-caption').empty().append(this.album[this.currentImageIndex].title.clone(true)).fadeIn('fast');
}
if (this.album.length > 1) {
$lightbox.find('.lb-number').html(this.options.labelImage + ' ' + (this.currentImageIndex + 1) + ' ' + this.options.labelOf + ' ' + this.album.length).fadeIn('fast');
} else {
$lightbox.find('.lb-number').hide();
}
$lightbox.find('.lb-outerContainer').removeClass('animating');
$lightbox.find('.lb-dataContainer').fadeIn(this.resizeDuration, function() {
return _this.sizeOverlay();
});
};
jQuery(function($){
var $addthisdiv = $('<div style="display: none;"></div>').appendTo('body'),
$triggers = $('a[rel^=lightbox]');
$triggers.each(function(i){
var $cap = $('<div class="addthis_toolbox addthis_default_style" addthis:url="' + this.href + '"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_pinterest_pinit"></a><a class="addthis_counter addthis_pill_style"></a></div>');
$triggers.eq(i).data('caption', $cap);
$addthisdiv.append($cap);
});
window.addthis_config = {'data_track_addressbar':true};
$('<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4ff5721a4e9875e3"><\/script>').appendTo('body');
});
could go in an external file. But for now, let's leave it on the page so we can more easily work out any bugs it might have.
Javascript variables not displaying
Reply With Quote
Bookmarks