Page 1 of 1

[Opgelost] Gallery (lightbox) en showtime diashow

Posted: Wed Apr 25, 2012 7:39 pm
by sjoerdd87
Hallo allemaal,

Weer een probleempje, ik gebruik nu de gallery (lightbox) en de showtime diashow op 1 pagina, helaas werkt de lightbox niet meer als ik de showtime diashow toevoeg.

Ik vermoed dat JQuery 2x word aangeroepen en heb dit dan ook uitgezet bij showtime, helaas "draaien" de foto's dan niet meer.

Waar kan ik dit wel wijzigen zodat deze 2 wel samen gaan?

Heb al gezocht in de map modules, maar hier kan ik het niet in vinden.
Kan zijn dat ik iets over het hoofd zie het zijn namelijk erg veel pagina's.

De complete code die ik nu heb voor de pagina:

Code: Select all

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>test Dekker Design Goes</title>
<link rel="stylesheet" type="text/css" href="http://dekker-design.nl/CMS/tmp/cache/stylesheet_combined_ce15d4ee34e14ebae1b31c7f7a44f171.css"/>

<link rel="shortcut icon" href="uploads/DekkerDesign/images/favicon.ico">
<link rel="icon" href="uploads/DekkerDesign/images/favicon.ico">

<base href="http://dekker-design.nl/CMS/" />
<meta name="Generator" content="CMS Made Simple - Copyright (C) 2004-11 Ted Kulp. All rights reserved." />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="1 month"> 

<link rel="stylesheet" href="http://dekker-design.nl/CMS/modules/Gallery/templates/css/DekkerDesign.css" type="text/css" media="screen" />
<__script__ type="text/javascript" src="modules/Gallery/templates/lightbox/js/prototype.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/lightbox/js/scriptaculous.js?load=effects,builder"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/lightbox/js/lightbox.js">
</__script>
<!-- Gallery/DekkerDesign -->

<!--css for show1-->
<link rel="stylesheet" type="text/css" href="http://dekker-design.nl/CMS/modules/Showtime/templates/css/Show_1.css" />
<!--LOAD SHOWTIME jQuery-->
<__script__ type="text/javascript" src="http://dekker-design.nl/CMS/modules/Showtime/templates/jquery/jquery-1.4.2.js" ></__script>
<__script__ type="text/javascript" src="http://dekker-design.nl/CMS/modules/Showtime/templates/jquery/jquery.cycle.all.min.js" ></__script>


<!--END SHOWTIME-->
</head>
</__body>

<!-- HEADER -->

<div id="header">

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

 <ul id="menu">
        <li> 


<ul>

<li><a href="http://dekker-design.nl/CMS/"><span>Home</span></a>


</li>

<li><a href="http://dekker-design.nl/CMS/index.php?page=Wie-zijn-Wij"><span>Wie zijn Wij</span></a>


</li>

<li><a href="http://dekker-design.nl/CMS/index.php?page=diensten"><span>Diensten</span></a>


</li>

<li><a href="http://dekker-design.nl/CMS/index.php?page=prijzen"><span>Prijzen</span></a>


</li>

<li><a href="http://dekker-design.nl/CMS/index.php?page=portfolio"><span>Portfolio</span></a>


</li>

<li><a href="http://dekker-design.nl/CMS/index.php?page=contact"><span>Contact</span></a>


</li>

        <li class="menuactive"><a class="menuactive" href="http://dekker-design.nl/CMS/index.php?page=test"><span>test</span></a>


</li>
</ul>
<li>
        </ul>

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

</div>



<!-- CONTAINER -->

<div id="container">



<!-- MBCONTAINER -->

<div id="mbContainer">

<!-- generated by showtime Module start -->
        <__script__ type="text/javascript">
        
        $(document).ready(function(){
			var lastslide=0;
			$('ul#slides_1').cycle({ 
				before: onbefore_1,
				fx: 'toss',
				speed:    1000, 
				timeout:  5000,
				pager:   '#slideshow_nav_1',
 
				pagerEvent: 'mouseover',
		
				fastOnEvent: false,
				pause: 1,
				pauseOnPagerHover: 1,
				prev: '#prev_1',
				next: '#next_1',
				after: onafter_1 
			});

            $("#slideshow_1").hover(function() {
                $("ul#prevnextnav_1").fadeIn();
            },
                function() {
                $("ul#prevnextnav_1").fadeOut();
            });
           
        
            function onbefore_1() {
                $('#com_1_'+lastslide).clearQueue();
                $('#com_1_'+lastslide).hide();
            }
            function onafter_1(curr, next, opts) {
                var index = opts.currSlide;
                var indexlast = opts.lastSlide;
                $('#com_1_'+index).queue(function (){
                    lastslide=index;
                    $(this).delay(100);
                    $(this).fadeIn(400);
                    $(this).dequeue();
                });
            }
        
        });

        
        </__script>

        <div id="slideshow_1" class="pics">
                        <div id="comments_st_1">
                            <div id="com_1_0" class="commentsparts_st_1"><h2>1.png</h2></div>
                                <div id="com_1_1" class="commentsparts_st_1"><h2>2.png</h2></div>
                                <div id="com_1_2" class="commentsparts_st_1"><h2>3.png</h2></div>
                                <div id="com_1_3" class="commentsparts_st_1"><h2>4.png</h2></div>
                                <div id="com_1_4" class="commentsparts_st_1"><h2>5.png</h2></div>
                                <div id="com_1_5" class="commentsparts_st_1"><h2>6.png</h2></div>
                                <div id="com_1_6" class="commentsparts_st_1"><h2>7.png</h2></div>
                                <div id="com_1_7" class="commentsparts_st_1"><h2>8.png</h2></div>
                                <div id="com_1_8" class="commentsparts_st_1"><h2>9.png</h2></div>
                                <div id="com_1_9" class="commentsparts_st_1"><h2>10.png</h2></div>
                            </div>
                    
                    <ul id="prevnextnav_1">
                    <li id="prev_1"><a href="#">Previous</a></li>
                    <li id="next_1"><a href="#">Next</a></li>
            </ul>
                             <div id="slideshow_nav_1" class="slide_nav_1"></div>
                 
            <ul id="slides_1">
                            <li><img width="930" height="210" style="position:absolute; left:0px; top:0px;"
					src="http://dekker-design.nl/CMS/uploads/images/DekkerDesign/Animatie/1.png" alt="" title="1.png" />
                                    </li>
                             <li><img width="930" height="210" style="position:absolute; left:0px; top:0px;"
					src="http://dekker-design.nl/CMS/uploads/images/DekkerDesign/Animatie/2.png" alt="" title="2.png" />
                                    </li>
                             <li><img width="930" height="210" style="position:absolute; left:0px; top:0px;"
					src="http://dekker-design.nl/CMS/uploads/images/DekkerDesign/Animatie/3.png" alt="" title="3.png" />
                                    </li>
                             <li><img width="930" height="210" style="position:absolute; left:0px; top:0px;"
					src="http://dekker-design.nl/CMS/uploads/images/DekkerDesign/Animatie/4.png" alt="" title="4.png" />
                                    </li>
                             <li><img width="930" height="210" style="position:absolute; left:0px; top:0px;"
					src="http://dekker-design.nl/CMS/uploads/images/DekkerDesign/Animatie/5.png" alt="" title="5.png" />
                                    </li>
                             <li><img width="930" height="210" style="position:absolute; left:0px; top:0px;"
					src="http://dekker-design.nl/CMS/uploads/images/DekkerDesign/Animatie/6.png" alt="" title="6.png" />
                                    </li>
                             <li><img width="930" height="210" style="position:absolute; left:0px; top:0px;"
					src="http://dekker-design.nl/CMS/uploads/images/DekkerDesign/Animatie/7.png" alt="" title="7.png" />
                                    </li>
                             <li><img width="930" height="210" style="position:absolute; left:0px; top:0px;"
					src="http://dekker-design.nl/CMS/uploads/images/DekkerDesign/Animatie/8.png" alt="" title="8.png" />
                                    </li>
                             <li><img width="930" height="210" style="position:absolute; left:0px; top:0px;"
					src="http://dekker-design.nl/CMS/uploads/images/DekkerDesign/Animatie/9.png" alt="" title="9.png" />
                                    </li>
                             <li><img width="930" height="210" style="position:absolute; left:0px; top:0px;"
					src="http://dekker-design.nl/CMS/uploads/images/DekkerDesign/Animatie/10.png" alt="" title="10.png" />
                                    </li>
                        </ul>              
        </div> 

<!-- generated by showtime Module end -->


/home/vhosts/dekker-design.nl/httpdocs/CMS/lib/smarty/internals/core.get_php_resource.php:66 - trigger_error<br/>/home/vhosts/dekker-design.nl/httpdocs/CMS/lib/smarty/internals/core.smarty_include_php.php:25 - smarty_core_get_php_resource<br/>/home/vhosts/dekker-design.nl/httpdocs/CMS/tmp/templates_c/%%01^013^01360D26%%tpl_body%3A23.php:40 - smarty_core_smarty_include_php<br/>/home/vhosts/dekker-design.nl/httpdocs/CMS/lib/smarty/Smarty.class.php:1263 - include<br/>/home/vhosts/dekker-design.nl/httpdocs/CMS/index.php:269 - fetch<br/>string(69) "Smarty error: file:uploads/ekkerDesign/animatie.shtml is not readable"


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

</div>



<!-- MOCONTAINER -->

<div id="moContainer">

<h1>test</h1>
<br>
<h2>Webwinkel Petra's Choice heeft door ons Ideal laten installeren op hun bestaande pakket, ook hebben wij hun geholpen met het een aantal aanpassingen. www.petraschoice.nl</h2>
<br>
<a href="uploads/images/Gallery/Portfolio/Petraschoice.jpg" title="Petraschoise" rel="lightbox[gallery2]"><img src="uploads/images/GalleryThumbs/8-8.jpg" width="250px" height="15%" class="img6" alt="Petraschoise" /></a>	<br><br><br><br><br><br><br><br>
<img src="uploads/DekkerDesign/images/line_bottom.gif" class="img2" width="920px" height="1px" alt="line_bottom">
<br>
<h2>Stichting Koronia heeft ons gevraagd een website te maken, deze stichting ondersteund en begeleid mensen. www.koronia.nl</h2>
<br>
<a href="uploads/images/Gallery/Portfolio/Koronia.jpg" title="Koronia" rel="lightbox[gallery2]"><img src="uploads/images/GalleryThumbs/7-8.jpg" width="250px" height="15%" class="img6" alt="Koronia" /></a>	<br><br><br><br><br><br><br><br>
<img src="uploads/DekkerDesign/images/line_bottom.gif" class="img2" width="920px" height="1px" alt="line_bottom">
<br>
<div class="galleryclear">&nbsp;</div>

</div>



<!-- FOOTER -->

<div id="footer">



<__script__ type="text/javascript">// <![CDATA[
function externalLinks() { 
if (!document.getElementsByTagName) return; 
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
anchor.getAttribute("rel") == "external")
anchor.target = "_blank"; 
}
}
window.onload = externalLinks;
// ]]></__script>


<__script__ type="text/javascript">
<!-- Begin
loadImage1 = new Image();
loadImage1.src = "uploads/DekkerDesign/images/Portfolio1.png";
staticImage1 = new Image();
staticImage1.src = "uploads/DekkerDesign/images/Portfolio.png";
loadImage2 = new Image();
loadImage2.src = "uploads/DekkerDesign/images/Contact1.png";
staticImage2 = new Image();
staticImage2.src = "uploads/DekkerDesign/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="uploads/DekkerDesign/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="uploads/DekkerDesign/images/Contact.png" class="img5" alt="Contact" id="image2"></a>

<a rel="external" href="http://www.facebook.com/pages/Dekker-Design-Goes/145594835521282"><img src="uploads/DekkerDesign/images/Facebook.png" class="img5" alt="Facebook"></a>

<a rel="external" href="https://twitter.com/#!/@Sjoerdd87"><img src="uploads/DekkerDesign/images/Twitter.png" class="img5" alt="Twitter"></a>

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

<a rel="external" href="http://validator.w3.org/"><img src="uploads/DekkerDesign/images/valid-html401.png" class="img5" alt="valid-html401"></a>

<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>
Ik hoop dat iemand me kan helpen.

Alvast bedankt Sjoerd

Re: Gallery (lightbox) en showtime diashow

Posted: Wed Apr 25, 2012 9:32 pm
by sjoerdd87
prototype.js
scriptaculous.js
lightbox.js
jquery-1.4.2.js
jquery.cycle.all.min.js

Dit zijn de scripts welke ik nu gebruik, welke roept nu voor de 2e keer JQuery aan?

Heb het al geprobeerd met noconflict maar waar en hoe ik die in moet stellen is mij een raadsel.

Re: Gallery (lightbox) en showtime diashow

Posted: Thu Apr 26, 2012 11:22 am
by sjoerdd87
Niemand die ook dit probleem heeft?

Heb het al geprobeerd met:

Code: Select all

<__script__ type="\text/javascript\"> var $ = jQuery.noConflict ();</ script>
Krijg het niet voor elkaar, het schijnt een Jquery-->Javascript probleem te zijn.

Gr.

Re: Gallery (lightbox) en showtime diashow

Posted: Fri Apr 27, 2012 11:05 am
by sjoerdd87
Er zijn toch wel meer mensen met gallery en showtime die het wel werkend krijgen? zonder conflict? of ben ik echt de enigste?

Gr. Sjoerd

Re: Gallery (lightbox) en showtime diashow

Posted: Fri Apr 27, 2012 2:27 pm
by Jos
Ja dat heb ik en ik heb geen conflicten... ik hou ook niet van conflicten ;)

Je zou het eens met "Slimbox" kunnen proberen. Die ziet er precies hetzelfde uit als Lightbox, maar werkt wel met jQuery. Het voordeel is dat bezoekers geen "onnodige" extra javascript hoeven te laden.

Afhankelijk van wat er als eerste aangeroepen wordt, moet je het laden van de jQuery library uitschakelen bij Showtime, of de bovenste regel javascript code uit de Gallery-template verwijderen (= het onderste tekstblok).

In mijn geval moest ik de Gallery-template aanpassen.

Succes.

Re: Gallery (lightbox) en showtime diashow

Posted: Tue May 01, 2012 9:30 am
by sjoerdd87
Opgelost bedankt voor de tip!