• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

jQuery-Slider mit Lightbox verbinden

B

Biotonne

Neues Mitglied
Hi,
ich muss zugeben, dass ich mich mit Javascript und so gar nicht auskenne. Dennoch versuche ich auf eine Website eine Slidergallery (aus einem Tutorial jQuery Image Slider Part 1 - YouTube) einzubauen und dazu das Lightboxfeature einzubauen.
Sodass beim Klicken auf das Bild im Slider der bekannte Lightboxeffekt das Bild anzeigt. Jedoch funktionieren beide Skripts nicht zusammen, was vermutlich an dem Verweis auf zwei verschiedene jQuery Librarys liegt (soweit ich das verstehe)?
Wie kann ich das umgehen?

Zum einen sieht der head der Seite so aus:
HTML: 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<style type="text/css"></style>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" />
<link rel="shortcut icon" href="http://www.html.de/images/fav.ico"> 
</style>
<script type="text/javascript" src="jq/jquery.js"></script>
<script type="text/javascript" src="jq/jslider.js"></script>
<script type="text/javascript">
    $(function() {
            $(".slider").jslider({
                btnNext: ".next",
                btnPrev: ".prev"    
            })
    });
</script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
</head>

zum anderen die Gallery im body:
HTML: 
<body>
  <div class="galleryslider_200">
  <img id="prev_200" class="prev" src="http://www.html.de/images/g_prev.png" /><div class="slider">
      <ul>
        <li><a href="fotos/800px/bild_1.jpg" rel="lightbox"><img class="slider" src="fotos/thumb_1.jpg" alt="Bild 1" /></a></li>
        <li><a href="fotos/800px/bild_2.jpg" rel="lightbox"><img class="slider" src="fotos/thumb_2.jpg" alt="Bild 2" /></a></li>
        <li><a href="fotos/800px/bild_3.jpg" rel="lightbox"><img class="slider" src="fotos/thumb_3.jpg" alt="Bild 3" /></a></li>
        <li><a href="fotos/800px/bild_4.jpg" rel="lightbox"><img class="slider" src="fotos/thumb_4.jpg" alt="Bild 4" /></a></li>
        <li><a href="fotos/800px/bild_5.jpg" rel="lightbox"><img class="slider" src="fotos/thumb_5.jpg" alt="Bild 5" /></a></li>
        <li><a href="fotos/800px/bild_6.jpg" rel="lightbox"><img class="slider" src="fotos/thumb_6.jpg" alt="Bild 6" /></a></li>

    </ul></div><img id="next_200" class="next" src="http://www.html.de/images/g_next.png" />
  </div>
</body>



Vielen Dank schonmal für eure Hilfe Biotonne
 
Hat leider nichts gändert.
Im grunde ist mit der Lightboxfunktion alles in ordnung, jedoch der Slider funktioniert nicht. stattdessen wird mir eine ungeordnete Liste mit den Listenelementen , den Bildern angezeit.
 
Hallo,

dann nehme doch einfach ein anderen efeckt, is ja nicht so das es nur den einen gibt :O)
du hattest das so?
Code: 
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jq/jslider.js"></script>
<script type="text/javascript">
    $(function() {
            $(".slider").jslider({
                btnNext: ".next",
                btnPrev: ".prev"    
            })
    });
</script>

<script src="js/lightbox.js"></script>
Cheffchen
 
Ja so hatte ich es auch... aber ich habe es durch ausprobieren geschafft das es funktioniert :D
Dein ansatz war richtig, nur habe ich das type="text/javascript" gefeht, wenn ich die jquery-1.7.2.min.js vergessen, wenn ich die andere lösche.
vielen Dank :)
 
Hallo Biotonne,

ich habe ein ähnliches Problem wie Du (nur mit der Fancybox) und versuche auch gerade dieses zu beheben.
Leider werde ich aus dem zweiten Satz in deinem letzten Beitrag nicht sehr schlau:D

Kannst du das evtl. nochmal erläutern, wie du das behoben hast?

Hier mal mein aktueller Head oben, ich weiß nicht genau was da nun reingehört und was nicht, kenne mich mit html, css und javascript leider nicht so sehr gut aus...

HTML: 
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script type="text/javascript">
 
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
$(document).ready(function(){
 
$(".hidden").hide();
$(".show").html("show ....");
 
$(".show").click(function() {
if (this.className.indexOf('clicked') != -1 ) {
        $(this).prev().slideUp(500);
        $(this).removeClass('clicked')
        $(this).html("show ....");
        }
        else {
        $(this).addClass('clicked')
        $(this).prev().slideDown(500);
        $(this).html("... hide");
        }
});
 
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
   !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
     /* Funktion Popup Teaser im Iframe nach ID */
      $("a[rel=teaser]").fancybox({
         'width': 818,
         'height': 500,
         'autoScale': false,
         'transitionIn': 'elastic',
         'transitionOut': 'elastic',
         'centerOnScroll': 'true',
         'type': 'iframe'
      });
  });
</script>
<meta name="viewport" content="width=device-width, initial-scale=0">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://www.html.de/images/favicon.jpg" />

<link rel="stylesheet" href="css/style.css">
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jslider.js"></script>
<script type="text/javascript">
 $(function() {
   $(".slider").jslider({
    btnNext: ".next",
    btnPrev: ".prev"
   })
 });
</script>

HTML: 
<div id="slider">
    <img id="prev" class="prev" src="http://www.html.de/images/prev.png" /><img id="next" class="next" src="http://www.html.de/images/next.png" />
      <div class="slider">
       <ul>
         <li><img class="slider" src="http://www.html.de/images/Startbild.jpg" /></li>
            <li><img class="slider" src="http://www.html.de/images/VertriebskonzepteF.jpg" /></li>
            <li><img class="slider" src="http://www.html.de/images/BusinessportaleF.jpg" /></li>
            <li><img class="slider" src="http://www.html.de/images/OutletstoresF.jpg" /></li>
            <li><img class="slider" src="http://www.html.de/images/ViralesMarketingF.jpg" /></li>
       </ul>
       </div>
</div

Vielleicht findest du oder jemand anders auch direkt den Fehler.

Aktuell werden mir die beiden Button angezeigt und darunter untereinander die einzelnen Bilder.

Vielen Dank!

Edit: Habe gerade nochmal über deinen Ausgangspost gelesen. Bei mir scheint das Problem evtl. einfacher. Die Fancybox und der Slider sind unabhängig voneinander. Das heißt die Fancybox ist in einem komplett anderen div und muss nicht öffnen, wenn auf den SLider geklickt wird, die Sliderbilder verweisen einfach auf eine andere Unterseite.
Trotzdem funktioniert es leider nicht
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben