Lightbox und Social Bookmark Bar verstehen sich nicht!

[WorldWideWeb]

Hallo Community,

ich habe das Problem, das der Titel des Beitrags höchstwahrscheinlich schon verrät. Ich habe auf meiner Webseite die Lightbox 2 und die Social Bookmark-Bar aus einem Tutorial von hier eingefügt.

Bei der Boommark Bar fahren ja die entsprechenden Grafiken aus. Das funktioniert aber nur ohne den Code der Lightbox. jQuery habe ich alles Installiert... und da wo kein Lightboxcode ist, funktioniert ja auch alles.

Kann mir jemand helfen. Ich habe wirklich keine Ahnung, wieso sich die beiden nicht verstehen.

Danke im Vorraus
WWW

 

[Maniac]

Such mal nach jQuery-none konflikt,

Die Lightbox ist leider nicht mit jQuery kompatibel, da sie mit einem anderen Framework ausgeliefert wird.

 

[WorldWideWeb]

Hallo,

vielen Dank für deine Antwort. Ich habe auch schon nachgegooglet.
Aber ich verstehe das irgenwie nicht!

Ich bin beim Suchen auf folgende Seite gekommen:
http://www.honeytechblog.com/resolve-issues-jquery-lightbox-prototype-libraries/

Aber ich verstehe das nicht (und zwar nicht nur, weil es Englisch ist!).

Könntet ihr mir vielleicht den fertigen Code posten.

PS: Der Code im Head sieht so aus:

<script type="text/javascript" src="../../styles/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            $('ul.icon li').hover(function(){
                $(this).find('img').animate({top:'-20px'},{queue:false,duration:300});
            }, function(){
                $(this).find('img').animate({top:'0px'},{queue:false,duration:500});
            });
        });
        </script>
  <script>
     var $j = jQuery.noConflict();

     // Use jQuery via $j(...)
     $j(document).ready(function(){
       $j("div").hide();
     });

     // Use Prototype with $(...), etc.
     $('someid').hide();
   </script>
        <style media="screen">
ul.icon {position: relative; top: 20px; left: 0px; margin: 0px; padding: 0px; height: 68px; z-index: 1;}
ul.icon li {list-style:none; padding: 0px 10px 0px 10px; margin: 0px; width:48px; height: 68px; display: inline;}
ul.icon li img {position: relative; top: 0; left: 0; border: 0;}
#holder {position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; height: 68px;}
#layer  {position: absolute; top: 45px; margin: 0px; padding: 0px; height: 24px; width:100%; background: url(../../images/socialbar/layer.png); z-index: 2;}
</style>
 <script type="text/javascript" src="../../styles/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="../../styles/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../../styles/lightbox/js/lightbox_2dot.js"></script>
<link rel="stylesheet" href="../../styles/lightbox/css/lightbox.css" media="screen" type="text/css"/>