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.

Ca you post your jQuery, or maybe give a link to your page?

yeah i will..hold on a sec...

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_Portfolio/site/pages/Web_Design.html

here is the code for the slimbox...

(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,resiz eDuration: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.offset Width!=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.

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.

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?

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.

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

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:

$(".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));
});

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.