• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 348
  • Last Modified:

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.
0
designaire
Asked:
designaire
  • 5
  • 5
1 Solution
 
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
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
Chris StanyonCommented:
Overflow:hidden needs adding to #slideshow #slidesContainer , not the body !

0
 
designaireAuthor Commented:
found where to put it, thank you!
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now