Log in

View Full Version : Jquery script not working on iphone



katebellami
11-26-2012, 03:11 PM
The slimbox is not working on iphone. Here is a link to the site:
http://www.madisonandmi.com

And here is the slimbox code:

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

(function($){
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
var opts = {
loop: true,
overlayOpacity: 0.6,
counterText: "Image {x} of {y}",
closeKeys: [22, 105],
nextKeys: [40, 102]
}
$('*[href][rel^=lightbox]').live('click', function(e){
var t = this, rel = t.getAttribute('rel'), hrefs = [], links = [], index;
if(rel === 'lightbox'){
$.slimbox(t.href, t.getAttribute('rev') || '', opts);
} else {
$('*[href][rel="' + rel + '"]').each(function(){
if($.inArray(this.href, hrefs) < 0){
if(t.href === this.href){index = hrefs.length;}
hrefs.push(this.href);
links.push([this.href, this.getAttribute('rev') || '']);
}
});
$.slimbox(links, index, opts);
}
e.preventDefault();
});
}
})(jQuery);

traq
11-26-2012, 04:16 PM
Have you tried the silmbox support group (https://groups.google.com/forum/?fromgroups#!forum/slimbox-support)?

I would suspect that your problem has something to do with the fact that this script uses the click event, which is not present on the iPhone. However,

Your question is unclear.
Please provide more information, and be as specific as possible. Stating "it doesn't work" is useless information - after all, if it worked, why would you be asking for help?
What do you want to accomplish? What have you already tried? What problems did you encounter?
Also, please be sure that you have included all relevant code and/or a link to the page in question.

bernie1227
11-26-2012, 08:07 PM
It's working fine on IOS for me...

katebellami
11-26-2012, 08:44 PM
No, this code originated from another post where I was having issues putting links in the captions of lightbox. I can go back to the original post if that is better. The issue is that when you click the thumbnail, no lightbox appears (and no right/left icons to scroll through images). The enlarged image just appears as a new page. thanks for your help. please let me know if best to go back to original post.

traq
11-26-2012, 08:48 PM
No, keeping it in this thread is fine.

Is the code you posted the modified code (that you're actually using)?

katebellami
11-26-2012, 11:29 PM
yes - this is the code I am using now. Looks like slimbox doesnt work on iphones.. so, I need to go back to the orignial dynamic drive lightbox. the issue I was having was putting links inside the captions (ie. Wee Babe website http://www.weebabe.com), and it was suggested to me that I switch to slimbox to achieve that. since slimbox doesnt work on mobile devices, I need to go back to lightbox. Is there a way to put a link in the caption?
http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm
thanks!

traq
11-27-2012, 01:54 AM
...Looks like slimbox doesnt work on iphones

It's working fine on IOS for me...

Given the conflicting report, I'd try to determine if it really isn't working before scrapping it.

bernie1227
11-27-2012, 09:41 AM
As best as I can tell, slimbox on the link you posted is working perfectly fine on IOS.

katebellami
12-04-2012, 08:35 PM
it isnt and was confirmed that it is not supported by mobile devices. i have to switch back to lightbox, thanks.