Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Jquery Slider and Slimbox (Lightbox) Problem

    I am currently working on a portfolio website and am using a Jquery slider for the images. The slider is broken up into the main image (displays a large image in a window) and a thumbnail area with thumbnail images in an unordered list. There is also a description area which is animated with jquery so that you can show/hide it. The way that the code is set up has it so that when you first come to the website what you see is the first main image with the description area for that image. When you click off of the current image (first image in the thumbnail list) to view another image then go back to the first image (the one that first showed up when you click go on the website) it is not the same image in the code (it is the same because the way it is set up is with the same main image and description...it is identical to the code for the first image that the user sees when they go to the website). I will illustrate what I am talking about to make it easier to understand (this is leading to a question...dont worry).

    <div "class"=main image>1st main image</div>

    <div class="description">description for 1st image</div>

    <div "class"=thumbnails>

    <a href="1st main image"><img src="1st main image thumbnail"/>

    <div class="description">description for 1st image</div>

    and so on for all of the images


    My question is...I am using slimbox (almost exactly the same as lightbox) and i have it so that in the desciption area you can, through links, view the actual website and then use slimbox so that the user can see larger images/more images of the current image that they are on. I have it working on that first section (the first image that the user comes to when they go to the website) but then when you click off to view another image (when it goes to the thumbnail area) when I try to use slim box (I use it exactly as I did in the first section...add rel="lightbox" in the <a href> tag, it just opens the image the default way (white page and image is in the upper left hand corner). I dont know why it will not work and have tried countless things without any luck. If anyone can please help me out it would be much appreciated. I will post the code being used for one of the pages so you can look at it if that helps.


    <div id="main" class="container">

    <div class="main_image">

    <img src="../images/main_images/inspires_me.jpg" alt="WhatInspiresMe" />

    <div class="description">

    <a href= "#" class="collapse"><h3>Description</h3></a>

    <div class="block">

    <h2>What Inspires Me?</h2>
    <p>February 2010</p>
    <p><strong>Purpose:</strong><br>To create a website based on eight inspirations in my life.</p><br><p><strong>Programs Used:</strong><br>Adobe Illustrator, Adobe Flash and Adobe Dreaweaver</p><br><p><a href="http://www.oswego.edu/~capp/BC_417/Project_One/site/index" target="_blank">View Website</a></p><a href="../images/banner_big.png" rel="lightbox"><p>More Images</p></a>


    </div>

    </div>

    </div>

    <div class="image_thumbs">

    <ul>

    <li>

    <a href="../images/main_images/inspires_me.jpg"><img src="../images/thumbs/inspiresMe_thumb.png" alt="" /></a>

    <div class="block">

    <h2>What Inspires Me?</h2>
    <p><strong>Purpose:</strong><br>
    To create a website based on eight inspirations in my life<br>
    </p>
    <p><strong>Programs Used:</strong><br>
    Adobe Illustrator, Adobe Flash and Adobe Dreaweaver<br></p>
    <p><a href="http://www.oswego.edu/~capp/BC_417/Project_One/site/index" target="_blank">View Website</a></p>
    <a href="../images/banner_big.png" rel="lightbox"><p>More Images</p></a>


    </div>


    The area with in the main image div (first thing the user goes to when going to the website) works with the slimbox but the thumbnails area (i only showed the first image section of the thumbnail code) does not work even though it should. And i should mention that I did try to use lightbox but it wouldnt work because I am also using jquery so i decided to use slidebox which is jquery based. Any help would be appreciated. Thank you and sorry for such a long description.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Ca you post your jQuery, or maybe give a link to your page?

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yeah i will..hold on a sec...

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    here is a link to the site....the page that i have been working on is the web design page. http://www.oswego.edu/~capp/Web_Port...eb_Design.html

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    here is the code for the slimbox...
    Code:
    (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: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]},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);
    
    // 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({/* Put custom options here */}, null, function(el) {
    			return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    		});
    	});
    }
    
    and here is the code for the image slider...
    
    <script type="text/javascript">
    $(document).ready(function(){
    
    
    $(".main_image .description").show();
    $(".main_image .block").hide();
    $(".main_image .block").animate({ opacity: .98 }, 1);
    
    $(".image_thumbs ul li:first").addClass('active');
    $(".image_thumbs ul li").click(function(){
    	
    	var imgAlt = $(this).find('img').attr("alt");
    	var imgTitle = $(this).find('a').attr("href");
    	var imgDescription = $(this).find('.block').html();
    	var imgDescriptionHeight = $(".main_image").find('.block').height();
    	
    	if ($(this).is(".active")) {
    		return false;
    	} else {
    		$(".main_image img").animate({ opacity: 0}, 250);
    		$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescriptionHeight}, 250 , function() {
    			$(".main_image .block").html(imgDescription).animate({ opacity: .98, marginBottom: "0" }, 250);
    			$(".main_image img").attr({ src: imgTitle , alt: imgAlt}).animate({opacity: 1}, 250);
    			
    		});
    	}
    	
    	$(".image_thumbs ul li").removeClass('active');
    	$(this).addClass('active');
    	return false;
    	
    })
    	.hover(function(){
    		$(this).addClass('hover');
    	}, function() {
    		$(this).removeClass('hover');
    	});
    	
    $("a.collapse").click(function(){
    	$(".main_image .block").slideToggle();
    	$("a.collapse").toggleClass("show");
    	return false;
    });
    
     });
    if anyone can help, it would be much appreciated.
    Last edited by Fou-Lu; 11-27-2010 at 03:10 PM.

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    wow...please answer...like now...it has been far too long and no one has told me why this is not working...pleaseeeeeeeeeeeeeeeeeee....i am getting sooooo frustrated.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I actually looked at this following your subsequent posts, but could not recreate the problem you describe and assumed you'd fixed it:

    it just opens the image the default way (white page and image is in the upper left hand corner).
    When I click on, for example, Fusion Satellite Radio, then the text in the main section is updated.

    What problem is it that you are seeing?

  • #8
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am having a problem with the slimbox. It works on the main page but then on any of the other pages (Fusion for example) it opens up the image in a different window instead of opening in slimbox (lightbox). I am talking about the "view more images" link. I can not figure out why it will not work. Any help would be much appreciated.

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    If you try it on the what inspires me page (the first one that it comes to when you open the site) it works..when you click on the view more images page it opens up the images in lightbox...but if you click on fusion and then go to the content (the description) and click on the same view more mages link, it opens up the image in a different page instead of opening it in lightbox

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    OK, I see the problem.

    When the page loads you're attaching the slimbox event to all anchors with the "lightbox" rel attribute, and hence the "more images" link in your '.main_image' block works fine.

    However, once you click on any of the thumbnails, the content of '.main_image' is replaced, and hence any anchor with "lightbox" in the "new" '.main_image' does not have slimbox attached to it (since this was only done at page load).So a click on the link generates the default behaviour which is to show the image.

    The easiest solution is to reattach slimbox after you've loaded the html, I think:

    Code:
    $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
    $(".main_image").find("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
    					return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    				});

  • Users who have thanked SB65 for this post:

    bcapp (12-08-2010)

  • #11
    New Coder
    Join Date
    Nov 2010
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    OMG! Thank you so much. That was the problem and to tell you the truth, I would have never figured that out. I can not describe to you how much that helps me out. Thank you! You are a genius.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •