Slideshow en Lightbox

Status
Niet open voor verdere reacties.
S

sjoerdd87

Gebruiker
Lid geworden
4 jul 2009
Berichten
26
Hallo,

Ik heb een probleem met een slideshow en lightbox.

Als ik deze samen gebruik werkt de lightbox prima en de Animatie niet.

Bijgaand de code voor de pagina die ik gebruik.

Werkende link: http://dekker-design.nl/DD/Portfolio.shtml

Login: forum
password: admin

Ik hoop dat iemand weet hoe ik deze samen kan gebruiken op 1 pagina.

Groet,

Sjoerd

Complete code

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="nl">

<head>

<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>-</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="icon" href="images/favicon.ico">
<meta name="keywords" content="-">
<meta name="description" content="-">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="1 month">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


</head>

<body>

<!-- HEADER -->

<div id="header">

<img src="images/Logo.png" class="img1" alt="Logo Dekker Design">

      
        <ul id="menu">
        <li class="active"><a href="index.shtml">Home</a></li>
        <li><a href="Wie_zijn_wij.shtml">Wie zijn wij</a></li>
        <li><a href="Diensten.shtml">Diensten</a></li>
        <li><a href="Prijzen.shtml">Prijzen</a></li>
        <li><a href="Portfolio.shtml">Portfolio</a></li>
        <li><a href="Contact.shtml">Contact</a></li>
        <li><a href="#">Forum</a></li>
        <li><a href="#">Sylvia Design</a></li>
        </ul> 

<img src="images/line_bottom.gif" class="img2" width="920px" height="1px" alt="line_bottom">

</div>



<!-- CONTAINER -->

<div id="container">



<!-- MBCONTAINER -->

<div id="mbContainer">

<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 3000 );
});

</script>

<style type="text/css">

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
    height: 210px;
    width: 930px;
}

#slideshow IMG {
    position:absolute;
    margin-top: 15px;
    margin-left: 15px;
    z-index:8;
    opacity:0.0;
            border-radius: 15px 15px 15px 15px;
        -moz-border-radius: 15px 15px 15px 15px;
        -webkit-border-radius: 15px 15px 15px 15px;
        border: 0px solid #800000;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

</style>

</head>

<body>

<!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default 
(otherwise this will be the last image) -->

<div id="slideshow">
    <img src="images/Animatie/1.png" alt="Slideshow Image 1" class="active" />
    <img src="images/Animatie/2.png" alt="Slideshow Image 2" />
    <img src="images/Animatie/3.png" alt="Slideshow Image 3" />
    <img src="images/Animatie/4.png" alt="Slideshow Image 4" />
    <img src="images/Animatie/5.png" alt="Slideshow Image 5" />
    <img src="images/Animatie/6.png" alt="Slideshow Image 6" />
    <img src="images/Animatie/7.png" alt="Slideshow Image 7" />
    <img src="images/Animatie/8.png" alt="Slideshow Image 8" />
    <img src="images/Animatie/9.png" alt="Slideshow Image 9" />
    <img src="images/Animatie/10.png" alt="Slideshow Image 10" />
</div>


</body>
</html>

<img src="images/line_bottom.gif" class="img3" width="920px" height="1px" alt="line_bottom">

</div>



<!-- MOCONTAINER -->

<div id="moContainer">

<h1>Portfolio	</h1><br>

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript">

<body onload="MM_preloadImages(‘images/Portfolio/Dubmeisters1.JPG’)…;initLightbox()"> </script>



<h2><a href="images/Portfolio/Dubmeisters1.JPG" rel="lightbox[Portfolio]" title="Kleding Dubmeisters"><img border="0" src="images/Portfolio/Dubmeisters1.JPG" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2>
<h2>Dubmeisters Volkswagen en Audi club Tholen vroeg ons kleding voor het meeting seizoen te ontwerpen en te laten drukken.</h2><br><br><br><br><br><br><br><br><br><br><br><br></h2>
<h2><a href="images/Portfolio/Dubmeisters2.JPG" rel="lightbox[Portfolio]" title="Kleding Dubmeisters"><img border="0" src="images/Portfolio/Dubmeisters2.JPG" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2>
<h2><a href="images/Portfolio/Dubmeisters3.JPG" rel="lightbox[Portfolio]" title="Kleding Dubmeisters"><img border="0" src="images/Portfolio/Dubmeisters3.JPG" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2><br><br><br><br><br><br><br><br><br><br><br><br>

<h2><a href="images/Portfolio/Partner01.jpg" rel="lightbox[Portfolio]" title="Rompertjes Partner Logistics"><img border="0" src="images/Portfolio/Partner01.jpg" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2>
<h2>Partner Logistics vroeg ons rompertjes te ontwerpen om uit te delen onder de werknemers die een baby verwachten.</h2><br><br><br><br><br><br><br><br><br><br><br><br>
<h2><a href="images/Portfolio/Partner02.JPG" rel="lightbox[Portfolio]" title="Rompertjes Partner Logistics"><img border="0" src="images/Portfolio/Partner02.JPG" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2><br><br><br><br><br><br><br><br><br><br><br><br>     
        
<h2><a href="images/Portfolio/BamTamTam.jpg" rel="lightbox[Portfolio]" title="BamTamTam"><img border="0" src="images/Portfolio/BamTamTam.jpg" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2>
<h2>Ook hebben wij het personeelsboekje gemaakt van BAM Wegen BV Regio Zuidwest genaamd BamTamTam.</h2><br><br><br><br><br><br><br><br><br><br><br><br>          
        
<h2><a href="images/Portfolio/Visitekaartje_Hengelsportpaleis.jpg" rel="lightbox[Portfolio]" title="Visitekaartje Hengelsportpaleis"><img border="0" src="images/Portfolio/Visitekaartje_Hengelsportpaleis.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Voor de webwinkel Hengelsportpaleis.nl hebben wij de visitekaartjes ontworpen en laten drukken.</h2><br><br><br><br><br><br><br><br>         

<h2><a href="images/Portfolio/Huisstijl_MuziekTheater.jpg" rel="lightbox[Portfolio]" title="Huisstijl Muziektheatergezelschap GOV"><img border="0" src="images/Portfolio/Huisstijl_MuziekTheater.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Muziektheatergezelschap GOV uit Goes heeft ons gevraagd om een folder en visitekaartjes te ontwerpen, deze hebben wij ook laten drukken.</h2><br><br><br><br><br><br><br><br>           
        
<h2><a href="images/Portfolio/Visitekaartje_CS_Marlon.jpg" rel="lightbox[Portfolio]" title="Visitekaartje CS Marlon"><img border="0" src="images/Portfolio/Visitekaartje_CS_Marlon.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Voor computerservice CS.Marlon uit Geersdijk hebben wij de visitekaartjes ontworpen en laten drukken.</h2><br><br><br><br><br><br><br><br>               
        
<h2><a href="images/Portfolio/Visitekaartje Lensen.jpg" rel="lightbox[Portfolio]" title="Visitekaartje Autopoetsbedrijf Lensen"><img border="0" src="images/Portfolio/Visitekaartje Lensen.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Voor autopoetsbedrijf Lensen hebben wij het visitekaartje ontworpen en hebben wij deze laten drukken.</h2><br><br><br><br><br><br><br><br>

<h2><a href="images/Portfolio/Logo_Autopoetsbedrijf Lensen.jpg" rel="lightbox[Portfolio]" title="Logo Autopoetsbedrijf Lensen"><img border="0" src="images/Portfolio/Logo_Autopoetsbedrijf Lensen.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Ook hebben wij voor autopoetsbedrijf Lensen het logo ontworpen en geleverd in JPG en EPS formaat.</h2><br><br><br><br><br>        
     
<h2><a href="images/Portfolio/Visitekaartje_FriedeKeijzer.jpg" rel="lightbox[Portfolio]" title="Visitekaartje Frie de Keijzer"><img border="0" src="images/Portfolio/Visitekaartje_FriedeKeijzer.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Frie de Keijzer heeft bij ons het visitekaartje laten digitaliseren en laten drukken.</h2><br><br><br><br><br><br><br><br>           

<h2><a href="images/Portfolio/D-Style.JPG" rel="lightbox[Portfolio]" title="Website D-Style"><img border="0" src="images/Portfolio/D-Style.JPG" width="250px" height="15%" align="left"></a></h2>
<h2>D-Style uit Goes heeft bij ons de website aan laten passen, wij hebben de foto's uit het Portfolio gesorteerd en een pagina aangemaakt met Links.
(<a href="http://www.D-Stylenl">www.D-Style.nl</a>)</h2><br><br><br><br><br><br><br><br>    
        
<h2><a href="images/Portfolio/DekkerOnkruid.jpg" rel="lightbox[Portfolio]" title="Website Dekker Onkruidbestrijding="><img border="0" src="images/Portfolio/DekkerOnkruid.jpg" width="250px" height="15%" align="left"></a></h2>
<h2>Dekker Onkruidbestrijding en Terrasreiniging heeft bij ons het logo en een bijpassende website laten ontwerpen. 
(<a href="http://www.dekkeronkruid.nl">www.dekkeronkruid.nl</a>)</h2><br><br><br><br><br><br>

<h2><a href="images/Portfolio/Visitekaartje_DekkerOnkruid.jpg" rel="lightbox[Portfolio]" title="Visitekaartje Dekker Onkruidbestrijding"><img border="0" src="images/Portfolio/Visitekaartje_DekkerOnkruid.jpg" width="250px" height="15%" align="left"></a></h2>
<h2>Dekker Onkruidbestrijding en Terrasreiniging heeft niet alleen zijn website en logo bij ons laten maken maar ook hebben wij de visitekaartjes ontworpen.</div></h2>



</div>



<!-- FOOTER -->

<div id="footer">

<script type="text/javascript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "http://www.dekker-design.nl/DD/images/Portfolio1.png";
staticImage1 = new Image();
staticImage1.src = "http://www.dekker-design.nl/DD/images/Portfolio.png";
loadImage2 = new Image();
loadImage2.src = "http://www.dekker-design.nl/DD/images/Contact1.png";
staticImage2 = new Image();
staticImage2.src = "http://www.dekker-design.nl/DD/images/Contact.png";

// End -->
</script>

<a href="http://www.dekker-design.nl/Portfolio.shtml" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="http://www.dekker-design.nl/DD/images/Portfolio.png" class="img5" alt="Portfolio" id="image1"></a>

<a href="http://www.dekker-design.nl/Contact.shtml" onmouseover="image2.src=loadImage2.src;" onmouseout="image2.src=staticImage2.src;">
<img name="image2" src="http://www.dekker-design.nl/DD/images/Contact.png" class="img5" alt="Contact" id="image2"></a>

<img src="images/Facebook.png" class="img5" alt="Facebook">

<img src="images/Twitter.png" class="img5" alt="Twitter">

<img src="images/Lauwerkrans.png" class="img5" alt="Lauwerkrans">

<img src="images/valid-html401.png" class="img5" alt="valid-html401">

<h6>© 2007 - 2012 © <a href="http://www.dekker-design.nl">Dekker Design</a> | Webdesign en alles wat ermee te maken heeft!</h6>
 
</div>
</div>
</body>
</html>

Animatie code

HTML: 
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script type="text/javascript">


function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 3000 );
});

</script> <!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default 
(otherwise this will be the last image) -->
<div id="slideshow">
<img src="images/Animatie/1.png" alt="Slideshow Image 1" class="active">
<img src="images/Animatie/2.png" alt="Slideshow Image 2">
<img src="images/Animatie/3.png" alt="Slideshow Image 3">
<img src="images/Animatie/4.png" alt="Slideshow Image 4">
<img src="images/Animatie/5.png" alt="Slideshow Image 5">
<img src="images/Animatie/6.png" alt="Slideshow Image 6">
<img src="images/Animatie/7.png" alt="Slideshow Image 7">
<img src="images/Animatie/8.png" alt="Slideshow Image 8">
<img src="images/Animatie/9.png" alt="Slideshow Image 9">
<img src="images/Animatie/10.png" alt="Slideshow Image 10"></div>

Portfolio code

HTML: 
<h1>Portfolio	</h1><br>

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript">

<body onload="MM_preloadImages(‘images/Portfolio/Dubmeisters1.JPG’)…;initLightbox()"> </script>



<h2><a href="images/Portfolio/Dubmeisters1.JPG" rel="lightbox[Portfolio]" title="Kleding Dubmeisters"><img border="0" src="images/Portfolio/Dubmeisters1.JPG" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2>
<h2>Dubmeisters Volkswagen en Audi club Tholen vroeg ons kleding voor het meeting seizoen te ontwerpen en te laten drukken.</h2><br><br><br><br><br><br><br><br><br><br><br><br></h2>
<h2><a href="images/Portfolio/Dubmeisters2.JPG" rel="lightbox[Portfolio]" title="Kleding Dubmeisters"><img border="0" src="images/Portfolio/Dubmeisters2.JPG" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2>
<h2><a href="images/Portfolio/Dubmeisters3.JPG" rel="lightbox[Portfolio]" title="Kleding Dubmeisters"><img border="0" src="images/Portfolio/Dubmeisters3.JPG" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2><br><br><br><br><br><br><br><br><br><br><br><br>

<h2><a href="images/Portfolio/Partner01.jpg" rel="lightbox[Portfolio]" title="Rompertjes Partner Logistics"><img border="0" src="images/Portfolio/Partner01.jpg" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2>
<h2>Partner Logistics vroeg ons rompertjes te ontwerpen om uit te delen onder de werknemers die een baby verwachten.</h2><br><br><br><br><br><br><br><br><br><br><br><br>
<h2><a href="images/Portfolio/Partner02.JPG" rel="lightbox[Portfolio]" title="Rompertjes Partner Logistics"><img border="0" src="images/Portfolio/Partner02.JPG" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2><br><br><br><br><br><br><br><br><br><br><br><br>     
        
<h2><a href="images/Portfolio/BamTamTam.jpg" rel="lightbox[Portfolio]" title="BamTamTam"><img border="0" src="images/Portfolio/BamTamTam.jpg" width="250px" height="15%" align="left" style="border: 0px solid #000000"></a></h2>
<h2>Ook hebben wij het personeelsboekje gemaakt van BAM Wegen BV Regio Zuidwest genaamd BamTamTam.</h2><br><br><br><br><br><br><br><br><br><br><br><br>          
        
<h2><a href="images/Portfolio/Visitekaartje_Hengelsportpaleis.jpg" rel="lightbox[Portfolio]" title="Visitekaartje Hengelsportpaleis"><img border="0" src="images/Portfolio/Visitekaartje_Hengelsportpaleis.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Voor de webwinkel Hengelsportpaleis.nl hebben wij de visitekaartjes ontworpen en laten drukken.</h2><br><br><br><br><br><br><br><br>         

<h2><a href="images/Portfolio/Huisstijl_MuziekTheater.jpg" rel="lightbox[Portfolio]" title="Huisstijl Muziektheatergezelschap GOV"><img border="0" src="images/Portfolio/Huisstijl_MuziekTheater.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Muziektheatergezelschap GOV uit Goes heeft ons gevraagd om een folder en visitekaartjes te ontwerpen, deze hebben wij ook laten drukken.</h2><br><br><br><br><br><br><br><br>           
        
<h2><a href="images/Portfolio/Visitekaartje_CS_Marlon.jpg" rel="lightbox[Portfolio]" title="Visitekaartje CS Marlon"><img border="0" src="images/Portfolio/Visitekaartje_CS_Marlon.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Voor computerservice CS.Marlon uit Geersdijk hebben wij de visitekaartjes ontworpen en laten drukken.</h2><br><br><br><br><br><br><br><br>               
        
<h2><a href="images/Portfolio/Visitekaartje Lensen.jpg" rel="lightbox[Portfolio]" title="Visitekaartje Autopoetsbedrijf Lensen"><img border="0" src="images/Portfolio/Visitekaartje Lensen.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Voor autopoetsbedrijf Lensen hebben wij het visitekaartje ontworpen en hebben wij deze laten drukken.</h2><br><br><br><br><br><br><br><br>

<h2><a href="images/Portfolio/Logo_Autopoetsbedrijf Lensen.jpg" rel="lightbox[Portfolio]" title="Logo Autopoetsbedrijf Lensen"><img border="0" src="images/Portfolio/Logo_Autopoetsbedrijf Lensen.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Ook hebben wij voor autopoetsbedrijf Lensen het logo ontworpen en geleverd in JPG en EPS formaat.</h2><br><br><br><br><br>        
     
<h2><a href="images/Portfolio/Visitekaartje_FriedeKeijzer.jpg" rel="lightbox[Portfolio]" title="Visitekaartje Frie de Keijzer"><img border="0" src="images/Portfolio/Visitekaartje_FriedeKeijzer.jpg" width="250px" height="15%" align="left" style="border: 1px solid #000000"></a></h2>
<h2>Frie de Keijzer heeft bij ons het visitekaartje laten digitaliseren en laten drukken.</h2><br><br><br><br><br><br><br><br>           

<h2><a href="images/Portfolio/D-Style.JPG" rel="lightbox[Portfolio]" title="Website D-Style"><img border="0" src="images/Portfolio/D-Style.JPG" width="250px" height="15%" align="left"></a></h2>
<h2>D-Style uit Goes heeft bij ons de website aan laten passen, wij hebben de foto's uit het Portfolio gesorteerd en een pagina aangemaakt met Links.
(<a href="http://www.D-Stylenl">www.D-Style.nl</a>)</h2><br><br><br><br><br><br><br><br>    
        
<h2><a href="images/Portfolio/DekkerOnkruid.jpg" rel="lightbox[Portfolio]" title="Website Dekker Onkruidbestrijding="><img border="0" src="images/Portfolio/DekkerOnkruid.jpg" width="250px" height="15%" align="left"></a></h2>
<h2>Dekker Onkruidbestrijding en Terrasreiniging heeft bij ons het logo en een bijpassende website laten ontwerpen. 
(<a href="http://www.dekkeronkruid.nl">www.dekkeronkruid.nl</a>)</h2><br><br><br><br><br><br>

<h2><a href="images/Portfolio/Visitekaartje_DekkerOnkruid.jpg" rel="lightbox[Portfolio]" title="Visitekaartje Dekker Onkruidbestrijding"><img border="0" src="images/Portfolio/Visitekaartje_DekkerOnkruid.jpg" width="250px" height="15%" align="left"></a></h2>
<h2>Dekker Onkruidbestrijding en Terrasreiniging heeft niet alleen zijn website en logo bij ons laten maken maar ook hebben wij de visitekaartjes ontworpen.</div></h2>
 
Laatst bewerkt:
Hoi sjoerdd87 ,
Die regel 7 en 9 in het portfolio-gedeelte hierboven zijn hele rare:
HTML: 
<script type="text/javascript">
 
    <body onload="MM_preloadImages(‘images/Portfolio/Dubmeisters1.JPG’)…;initLightbox()">
</script>
In een javascript kan geen gewone html zitten.
Laat je het <script>...</script> eromheen weg, dan staat er een tweede <body> in de body, dat kan ook niet.
Waarschijnlijk moet de onload-functie in de eerste <body> na de <head> komen, en kan deze vervallen.
Dan staan er kromme aanhalingstekens (‘ en ’) in het onload-regeltje, dat kan ook niet: dat moeten rechte aanhalingstekens zijn.
En tenslotte staan er drie punten voor de puntkomma, die er niet in thuis horen. Het zijn eigenlijk geen echte drie puntjes, het is één speciaal letterteken met de 3 mini-puntjes! (Het lijkt wel of dit uit een Word-document gekopieerd is)

Door dit geheel zal in elk geval de lightbox niet gauw werken. ;)
Kom je er niet uit, dan moet je even op de lightbox-site kijken hoe het ook al weer moet.

Met vriendelijke groet,
CSShunter
 
Ik weet dat dat 2 rare regeltjes waren, deze horen er origineel ook niet in, maar volgens de site van lightbox kon je zo wel 2 javascripts laten werken dus vandaar dat ik dat geprobeerd heb, maar als ik die weglaat werkt de lightbox nog steeds goed maar alleen de animatie niet.

Laat ik de lightbox weg werkt de animatie wel.

Dus de lightbox werkt wel en de animatie niet.

Gr. Sjoerd.
 
De oplossing is gevonden de code voor de animatie is:

HTML: 
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 

<script type="text/javascript">


function slideSwitch($) { 

    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
     // var $sibs  = $active.siblings();
     // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
jQuery.noConflict();
jQuery(function($) {
    setInterval(function () {
        slideSwitch($);
    }, 3000 );
});



</script> <!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default 
(otherwise this will be the last image) -->
<div id="slideshow">
<img src="images/Animatie/1.png" alt="Slideshow Image 1" class="active">
<img src="images/Animatie/2.png" alt="Slideshow Image 2">
<img src="images/Animatie/3.png" alt="Slideshow Image 3">
<img src="images/Animatie/4.png" alt="Slideshow Image 4">
<img src="images/Animatie/5.png" alt="Slideshow Image 5">
<img src="images/Animatie/6.png" alt="Slideshow Image 6">
<img src="images/Animatie/7.png" alt="Slideshow Image 7">
<img src="images/Animatie/8.png" alt="Slideshow Image 8">
<img src="images/Animatie/9.png" alt="Slideshow Image 9">
<img src="images/Animatie/10.png" alt="Slideshow Image 10"></div>


En voor de slideshow blijft hij hetzelfde, het probleem zat in de noconflict.

Hierna wel het probleem dat als de lightbox werkte de slideshow zodra je er met de muis overheen ging haperde. dit is opgelost door de volgende CSS code:

Code: 
#lightbox{	position: absolute;	left: 0px; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; background: url('../images/prevlabel.gif') no-repeat left 15%; }
#nextLink { right: 0; float: right; background: url('../images/nextlabel.gif') no-repeat right 50%; }




#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: autopx; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: autopx; z-index: 90; width: auto%; height: 500px; background-color: #000; }

Hierdoor blijven de next en prev button altijd zichtbaar maargoed voor de rest werken ze nu perfect samen.

Misschien iemand anders een oplossing om ze toch onzichtbaar te kunnen laten worden?

Gr. Sjoerd.
 
Het zat dus in het gedeelte:
Code: 
#prevLink { left: 0; float: left; background: url('../images/prevlabel.gif') no-repeat left 15%; }
#nextLink { right: 0; float: right; background: url('../images/nextlabel.gif') no-repeat right 50%; }
 
Hoi Sjoerd,
Als ik met de Webdeveloper Toolbar (Menu CSS > Edit CSS) online dit doe ...:
Code: 
#hoverNav #prevLink,
#hoverNav #nextLink{
    background-position:0 -9999px;
    }
#hoverNav #prevLink:hover {
    background-position: 0 15%;
    }
#hoverNav #nextLink:hover {
    background-position: 100% 15%;
    }
... zijn de "Vorige" en "Volgende" opschriftjes verdwenen tot je over de linker- resp. rechterhelft van het img hovert.

En met ...:
Code: 
#hoverNav #prevLink,
#hoverNav #nextLink{
    background-position:0 -9999px;
    }
#hoverNav:hover #prevLink {
    background-position: 0 15%;
    }
#hoverNav:hover #nextLink {
    background-position: 100% 15%;
    }
... komen ze altijd alle twee tegelijk tevoorschijn als je over het img in de lightbox hovert.
Naar keuze! :)

Met de 15% (of iets anders) kan je ze op dezelfde hoogte uitmikken.

Met ...:
Code: 
#prevLink,
#nextLink {
    opacity: .6;
    }
... kan je ze nog wat doorschijnend maken (voor de browsers die de opacity-eigenschap ondersteunen), zodat ze iets bescheidener zijn en niet zo knallend over de foto's heen komen.

=====

Terzijde: in het lightbox.js staat in het begin:
[JS]// Configurationl
...
// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Image",
labelOf: "of"
...[/JS]
Daarvan kan je nog maken voor een NL onderschrift:
[JS]// Configurationl
...
// When grouping images this is used to write: Image # of #.
// Change it for non-english localization
labelImage: "Afbeelding",
labelOf: "van"
...[/JS]
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hoi CSShunter,

Heb natuurlijk zelf al een aantal dingen geprobeerd.
Maar zodra ik de "hover" ga gebruiken gaat de animatie zodra je er met de muis over gaat stotteren, dit is erg vervelend, en als ik die code weghaal doet hij het wel goed.

Daarom vind ik het ook erg vreemd, de "hover" functie geeft dus een conflict op de animatie.

Van het javascript wist ik niet, deze heb ik nu ook vertaald bedankt hiervoor.

Als je wilt kan ik de website online zetten met het stotteren erbij dan kun je zien wat ik bedoel, dit moet je dan maar even doorgeven dan pas ik het even aan.

Ook de opacity is idd wel een goede zet.

Gr. Sjoerd.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan