addThis (Facebook Like / comments?)

495 views
Skip to first unread message

Thomas

unread,
Feb 2, 2012, 4:59:18 AM2/2/12
to Slimbox
Hi is there no one that have successfully integrated these functions?
Perhaps development of this application is closed long ago, and
someone know of a similar code project with these features.

Gabo Sierra

unread,
Mar 1, 2012, 4:35:25 PM3/1/12
to slimbox...@googlegroups.com
Its easy:
use this in slimbox2.js

(function(w){var F=w(window),u,f,G=-1,n,x,E,v,y,M,r,m=!window.XMLHttpRequest,s=[],l=document.documentElement,k={},t=new Image(),K=new Image(),I,a,g,p,J,d,H,c,B,z,L;w(function(){w("body").append(w([I=w('<div id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],H=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;" />').append([J=w('<a id="lbPrevLink" href="#" />').click(C)[0],d=w('<a id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(H).append([w('<a id="lbCloseLink" href="#" />').add(I).click(D)[0],z=w('<div id="lbFacebook" />')[0],B=w('<div id="lbCaption" />')[0],L=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(P,O,N){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78],facebookContent:""},N);if(typeof P=="string"){P=[[P,O]];O=0}y=F.scrollTop()+(F.height()/2);M=u.initialWidth;r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:M,height:r,marginLeft:-M/2}).show();v=m||(I.currentStyle&&(I.currentStyle.position!="fixed"));if(v){I.style.position="absolute"}w(I).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);A();j(1);f=P;u.loop=u.loop&&(f.length>1);return b(O)};w.fn.slimbox=function(N,Q,P){Q=Q||function(R){return[R.href,R.title]};P=P||function(){return true};var O=this;return O.unbind("click").click(function(){var T=this,V=0,U,R=0,S;U=w.grep(O,function(X,W){return P.call(T,X,W)});for(S=U.length;R<S;++R){if(U[R]==T){V=R}U[R]=Q(U[R],R)}return w.slimbox(U,V,N)})};function A(){var O=F.scrollLeft(),N=F.width();w([a,H]).css("left",O+(N/2));if(v){w(I).css({left:O,top:F.scrollTop(),width:N,height:F.height()})}}function j(N){if(N){w("object").add(m?"select":"embed").each(function(P,Q){s[P]=[Q,Q.style.visibility];Q.style.visibility="hidden"})}else{w.each(s,function(P,Q){Q[0].style.visibility=Q[1]});s=[]}var O=N?"bind":"unbind";F[O]("scroll resize",A);w(document)[O]("keydown",o)}function o(P){var O=P.keyCode,N=w.inArray;return(N(O,u.closeKeys)>=0)?D():(N(O,u.nextKeys)>=0)?e():(N(O,u.previousKeys)>=0)?C():false}function C(){return b(x)}function e(){return b(E)}function b(N){if(N>=0){G=N;n=f[G][0];x=(G||(u.loop?f.length:0))-1;E=((G+1)%f.length)||(u.loop?0:-1);q();a.className="lbLoading";k=new Image();k.onload=i;k.src=n}return false}function i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidden",display:""});w(p).width(k.width);w([p,J,d]).height(k.height);if(u.facebookContent){w(z).html(u.facebookContent.replace("{url}",f[G][0]))}w(B).html(f[G][1]||"");w(L).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,G+1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(E>=0){K.src=f[E][0]}M=g.offsetWidth;r=g.offsetHeight;var N=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:N},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=M){w(a).animate({width:M,marginLeft:-M/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(H).css({width:M,top:N+r,marginLeft:-M/2,visibility:"hidden",display:""});w(g).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,h)})}function h(){if(x>=0){w(J).show()}if(E>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);H.style.visibility=""}function q(){k.onload=null;k.src=t.src=K.src=n;w([a,g,c]).stop(true);w([J,d,g,H]).hide()}function D(){if(G>=0){q();G=x=E=-1;w(a).hide();w(I).stop().fadeOut(u.overlayFadeDuration,j)}return false}})(jQuery);

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    jQuery(function($) {
        $("a[rel^='lightbox']").slimbox({facebookContent: '<iframe src="http://www.facebook.com/plugins/like.php?href={url}&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:21px;" allowTransparency="true"></iframe>'/* Put custom options here */}, null, function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        });       
    });
}


and then this in slimbox2_autoload.js:

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
    jQuery(function($) {
        $("a[rel^='lightbox']").slimbox({facebookContent: '<iframe src="http://www.facebook.com/plugins/like.php?href={url}&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:21px;" allowTransparency="true"></iframe>'/* Put custom options here */}, null, function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
        });
    });
}

and a little of CSS:

#lbFacebook {
display: inline;
float: right;
height: 22px;
margin: 5px 10px;
outline: none;

Thomas

unread,
Apr 10, 2012, 2:56:33 PM4/10/12
to Slimbox
Hi! Thanks, I have successfully integrated both a Tweet and a Like
button but I can't get comments to work. Have anyone else?
How do I get the variables with the image title, url and image id
inside the Autoload function. I would like to print them out under the
image.

Best regards!


On 1 mar, 23:35, Gabo Sierra <pumpfr...@gmail.com> wrote:
> Its easy:
> use this in slimbox2.js
>
> (function(w){var
> F=w(window),u,f,G=-1,n,x,E,v,y,M,r,m=!window.XMLHttpRequest,s=[],l=document .documentElement,k={},t=new
> Image(),K=new
> Image(),I,a,g,p,J,d,H,c,B,z,L;w(function(){w("body").append(w([I=w('<div
> id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],H=w('<div
> id="lbBottomContainer" />')[0]]).css("display","none"));g=w('<div
> id="lbImage" />').appendTo(a).append(p=w('<div style="position: relative;"
> />').append([J=w('<a id="lbPrevLink" href="#" />').click(C)[0],d=w('<a
> id="lbNextLink" href="#" />').click(e)[0]])[0])[0];c=w('<div id="lbBottom"
> />').appendTo(H).append([w('<a id="lbCloseLink" href="#"
> />').add(I).click(D)[0],z=w('<div id="lbFacebook" />')[0],B=w('<div
> id="lbCaption" />')[0],L=w('<div id="lbNumber" />')[0],w('<div
> style="clear: both;"
> />')[0]])[0]});w.slimbox=function(P,O,N){u=w.extend({loop:false,overlayOpac ity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",ini tialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDurat ion:400,counterText:"Image
> {x} of
> {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78],facebookCon tent:""},N);if(typeof
> P=="string"){P=[[P,O]];O=0}y=F.scrollTop()+(F.height()/2);M=u.initialWidth; r=u.initialHeight;w(a).css({top:Math.max(0,y-(r/2)),width:M,height:r,margin Left:-M/2}).show();v=m||(I.currentStyle&&(I.currentStyle.position!="fixed") );if(v){I.style.position="absolute"}w(I).css("opacity",u.overlayOpacity).fa deIn(u.overlayFadeDuration);A();j(1);f=P;u.loop=u.loop&&(f.length>1);return
> b(O)};w.fn.slimbox=function(N,Q,P){Q=Q||function(R){return[R.href,R.title]} ;P=P||function(){return
> true};var O=this;return O.unbind("click").click(function(){var
> T=this,V=0,U,R=0,S;U=w.grep(O,function(X,W){return
> P.call(T,X,W)});for(S=U.length;R<S;++R){if(U[R]==T){V=R}U[R]=Q(U[R],R)}retu rn
> w.slimbox(U,V,N)})};function A(){var
> O=F.scrollLeft(),N=F.width();w([a,H]).css("left",O+(N/2));if(v){w(I).css({l eft:O,top:F.scrollTop(),width:N,height:F.height()})}}function
> j(N){if(N){w("object").add(m?"select":"embed").each(function(P,Q){s[P]=[Q,Q .style.visibility];Q.style.visibility="hidden"})}else{w.each(s,function(P,Q ){Q[0].style.visibility=Q[1]});s=[]}var
> O=N?"bind":"unbind";F[O]("scroll
> resize",A);w(document)[O]("keydown",o)}function o(P){var
> O=P.keyCode,N=w.inArray;return(N(O,u.closeKeys)>=0)?D():(N(O,u.nextKeys)>=0 )?e():(N(O,u.previousKeys)>=0)?C():false}function
> C(){return b(x)}function e(){return b(E)}function
> b(N){if(N>=0){G=N;n=f[G][0];x=(G||(u.loop?f.length:0))-1;E=((G+1)%f.length) ||(u.loop?0:-1);q();a.className="lbLoading";k=new
> Image();k.onload=i;k.src=n}return false}function
> i(){a.className="";w(g).css({backgroundImage:"url("+n+")",visibility:"hidde n",display:""});w(p).width(k.width);w([p,J,d]).height(k.height);if(u.facebo okContent){w(z).html(u.facebookContent.replace("{url}",f[G][0]))}w(B).html( f[G][1]||"");w(L).html((((f.length>1)&&u.counterText)||"").replace(/{x}/,G+ 1).replace(/{y}/,f.length));if(x>=0){t.src=f[x][0]}if(E>=0){K.src=f[E][0]}M =g.offsetWidth;r=g.offsetHeight;var
> N=Math.max(0,y-(r/2));if(a.offsetHeight!=r){w(a).animate({height:r,top:N},u .resizeDuration,u.resizeEasing)}if(a.offsetWidth!=M){w(a).animate({width:M, marginLeft:-M/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(H ).css({width:M,top:N+r,marginLeft:-M/2,visibility:"hidden",display:""});w(g ).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration ,h)})}function
> h(){if(x>=0){w(J).show()}if(E>=0){w(d).show()}w(c).css("marginTop",-c.offse tHeight).animate({marginTop:0},u.captionAnimationDuration);H.style.visibili ty=""}function
> q(){k.onload=null;k.src=t.src=K.src=n;w([a,g,c]).stop(true);w([J,d,g,H]).hi de()}function
> D(){if(G>=0){q();G=x=E=-1;w(a).hide();w(I).stop().fadeOut(u.overlayFadeDura tion,j)}return
> false}})(jQuery);
>
> // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
> if (!/android|iphone|ipod|series60|symbian|windows
> ce|blackberry/i.test(navigator.userAgent)) {
>     jQuery(function($) {
>         $("a[rel^='lightbox']").slimbox({facebookContent: '<iframe
> src="http://www.facebook.com/plugins/like.php?href={url}&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=f alse&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21"
> scrolling="no" frameborder="0" style="border:none; overflow:hidden;
> width:130px; height:21px;" allowTransparency="true"></iframe>'/* Put custom
> options here */}, null, function(el) {
>             return (this == el) || ((this.rel.length > 8) && (this.rel ==
> el.rel));
>         });
>     });
>
> }
>
> and then this in slimbox2_autoload.js:
>
> // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
> if (!/android|iphone|ipod|series60|symbian|windows
> ce|blackberry/i.test(navigator.userAgent)) {
>     jQuery(function($) {
>         $("a[rel^='lightbox']").slimbox({facebookContent: '<iframe
> src="http://www.facebook.com/plugins/like.php?href={url}&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=f alse&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21"

Thomas

unread,
May 20, 2012, 5:37:20 PM5/20/12
to Slimbox
Hi im hoping that someone can guide me how to load a jquey function
from within the autostart function that I have in my slimbox js file.
Here is the full code with working like and tweet buttons.
The problem is that I can't load changeItemID(); from the place I have
it now and the code fails when I try to put it there without
changeItemID as container. as you can see I need the el.href variable
and don't know how to get it to work with my other function.


changeItemID = function() {
// Attach a change function to the <select> element
$('[name=my-item-price]').change(function() {

var form = $(this).parent(['#form']);
var size = $(this).val(); // Size is whatever the value the user has
selected
var itemId; var price1; var price2;
if(year < 1991) { price1 = 99; price2 = 199; }
else { price1 = 79; price2 = 159; }

// Determine the correct price and item ID based on the selected size
switch (size) {
case '79':
itemId = imgName + '-a';
break;
case '159':
itemId = imgName + '-b';
break;
case '59':
itemId = imgName + '-c';
break;
}
form.find('[name=my-item-id]').val(itemId); // Update the item
ID
alert('xoxo');
});
};

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/
i.test(navigator.userAgent)) {
jQuery(function($) {
$("a[rel^='lightbox']").slimbox({facebookContent: '<div
class="twitter"><a href="http://twitter.com/share" class="twitter-
share-button" data-count="none">Tweet</a><script type="text/
javascript" src="http://platform.twitter.com/widgets.js"></script></
div><div class="facebook"><iframe src="http://www.facebook.com/plugins/
like.php?href='+encodeURIComponent(location.href)
+'&send=false&layout=button_count&width=50&show_faces=false&action=like&colorscheme=light&font&height=20"
allowtransparency="true" frameborder="0" scrolling="no"></iframe></
div>'/* Put custom options here */}, function(el) { var imgName =
el.href.split("/").pop(); var year = imgName.substr(0,4);
changeItemID(); return [el.href, el.title + '<form method="post"
action="" class="jcart slimCart" ><fieldset><select name="my-item-
price" class="prod-options"><option value="size-1">Size</
option><option value="' + price1 + '">10x15cm</option><option value="'
+ price2 + '">20x30cm</option><option value="59">-Web use</option></
select><input type="hidden" name="my-item-id" value="' + itemId + '" /
><input type="hidden" name="my-item-name" value="' + imgName + '" /
><input type="hidden" name="my-item-qty" value="1" /><input
type="hidden" name="my-item-url" value="' + el.href + '" /><input
type="submit" name="my-add-button" value=" " class="button" /></
fieldset></form>'];

zdig one

unread,
Aug 24, 2012, 11:26:32 AM8/24/12
to slimbox...@googlegroups.com
what is the code to insert for v 1.8 ??
because it dont support j query
Message has been deleted
Message has been deleted

Robert Zieschang

unread,
Oct 20, 2012, 11:49:48 AM10/20/12
to slimbox...@googlegroups.com
It's german, but it might help:


Let me know if you need any help:

robert.zieschang at its-zieschang.de


PS.: i am working on multilang support. ;)
Reply all
Reply to author
Forward
0 new messages