jquery slider and lightbox

I'm trying to get a jquery slider and a lightbox to work on the same page. I'm getting a javascript error however. The lightbox is a jquery lightbox. Has anybody tried to do this before and besides find one that does both, which I don't see, is it possible.
designaireAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
Overflow:hidden needs adding to #slideshow #slidesContainer , not the body !

0
 
Chris StanyonCommented:
Any chance we have a link to the page so we can look at the code. There could be a number of things wrong.

0
 
designaireAuthor Commented:
The below code is the slider and it works fine. When I try to add the lightbox which is also jquery I get an javascript error on this line of code...


  $(function() {
        $('#gallery a').lightBox();
    });
<style type="text/css">
<!--
/** 
 * Slideshow style rules.
 */
#slideshow {
	 margin:0 auto;
	width:525px;
	height:350px;
	position:relative;
}
#slideshow #slidesContainer {
 
   margin:0 auto;
  width:400px;
  height:300px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:400px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:390px;

}

/** 
 * Slideshow controls style rules.
 */
.control {
  display:block;
  width:40px;
  height:390px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top:0;
  left:0;
  background:transparent url(images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  background:transparent url(images/control_right.jpg) no-repeat 0 0;
}

/** 
 * Style rules for Demo page
 */
* {
  margin:0;
  padding:0;

  
}
a {
  color: #fff;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
body {
  background:#000;
}
#pageContainer {
  margin:0 auto;
  width:960px;
}



.slide img {
  float:left;
  margin:40px 0px 0px 0px;
}

-->
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 400;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>

Open in new window

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Chris StanyonCommented:
Hi designaire,

The more specific you can be, the more chance there is of us helping you. The only code you've posted is the code that's working !

We can't see from that what's not working.

You say you get a JavaScript error, but don't give us any details on what error, where the error occurs or when the error occurs.

As per my previous post, can you post a link to your page so we can have a look at the whole thing. It's impossible to guess what might be causing your problem.

You say you get an error when calling $('#gallery a').lightBox(), so there's a fair chance that your error is in that code, and not your slider.


0
 
designaireAuthor Commented:
Ok, I got it to work HOWEVER, when the page loads you can see the scroll bars on the slider for a second. Is there there a way to fix that. I noticed that I don't images load a different times on the web pages anymore, the pages load all at once. How do you make that happen???
0
 
Chris StanyonCommented:
In your CSS file you have a line that explicitly tells the browser to show scrollbars.

#slideshow #slidesContainer { overflow:auto; }

If you don't want scrollbars to show, change it to:

overflow: hidden;

Not sure what you mean by page load all at once...sorry



0
 
designaireAuthor Commented:
It doesn't seem to be doing it from my work machine but at home I can see the scroll bars for just one second before the javascript hides it. If you don't see it maybe it's ok.

http://www.designaire.com/ipad/graphic.htm
0
 
Chris StanyonCommented:
When your page loads your css file tells the browser to show the scrollbars, and your javascript then tells it to hide them. That's why you get the flicker.

Use CSS to hide them in the first place and you won't have the problem.
0
 
designaireAuthor Commented:
I added overflow: hidden; to the body but it didn't seem to help. Is there something else I should do?
0
 
designaireAuthor Commented:
found where to put it, thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.