...

View Full Version : jQuery imagescroller and lightbox doesn't work together on one page



swebd
08-25-2009, 09:33 AM
Hey all,

this is the first time I'm using this forum...

I have a problem when I want to use an image scroller and a lightbox on one page. Both are working fine alone but when I'm integrate the other, only one or none are working (depending off the order of the script parts above in my page)

I don't know what you need for trying to solve this problem so let me know if you needed something else...

I have scripts for:
- light window for showing an shockwave file
- lightbox to show multiple images
- image scroller to show only 3 images in a DIV

This is the script part in the HEAD section:

<!-- light window -->
<!-- JavaScript -->
<script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="lightwindow/javascript/effects.js"></script>
<script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>

<!-- jQuery lightBox plugin -->
<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.js"></script>
<script type="text/javascript" src="jquery-lightbox-0.5/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-lightbox-0.5/css/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox(); // #gallery a').lightBox();
});
</script>

<!-- imagescroller -->
<script type="text/javascript" src="imagescroller/jquery.js"></script>
<script type="text/javascript" src="imagescroller/jquery.imageScroller.pack.js"></script>

<script type="text/javascript">

$(function(){

$("#viewer").imageScroller({
next:"btn1",
prev:"btn2",
frame:"viewerFrame",
width:100,
child:"a",
auto:false
});

});
</script>


This is the code in the BODY section:

<a href1.jpeg" rel="lightbox" ><img src="1.jpeg" ></a>


Hopely someone can solve my problem!
Thanks !!!

Regards,
Stijn

I have checked already the forum threads:
http://www.codingforums.com/showthread.php?t=144887
http://www.codingforums.com/archive/index.php/t-151478.html

Fumigator
08-25-2009, 04:16 PM
Sounds like a prototype/jquery conflict. Did you try the suggestions in the thread you mentioned?

http://www.codingforums.com/showthread.php?t=144887

You can also just eliminate one or the other framework, both have plugins that will do what you want to do.

swebd
08-26-2009, 03:22 PM
Hey,

I tried this solution but it doesn't work.

<script type="text/javascript">
var j = jQuery.noConflict();
// Do something with jQuery
j(function() {
j('a[@rel*=lightbox]').lightBox();
});

// Do something with another library's $()
<!-- imagescroller -->
$(function(){
$("#viewer").imageScroller({
next:"btn1",
prev:"btn2",
frame:"viewerFrame",
width:100,
child:"a",
auto:false
});
});
</script>

I also tried to enable the prototype framework but also whithout succes.

Regards,
Stijn



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum