Hallo Leute,
ich hoffe ihr könnt mir bei meinem Problem helfen,
es würde mich freuen!
Im Head-Bereich meiner Website habe hatte ich zunächst das jquery-Skript für eine Bilder-Galerie drin:
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">$(function() { $('#gallery a').lightBox(); });</script>
Funktionierte auch!
Jetzt habe ich dem Head-Bereich ein weiteres Skript hinzugefügt. Damit soll eine Popup-Box geöffnet werden um Inhalt auf derselben Seite zu öffnen.
Wenn ich das PopupBox-Skript drin habe, funktioniert das für die jquery Gallerie nicht mehr - habt ihr eine Ahnung warum?
Hier der Code vom PopupBox-Skript:
<link rel="stylesheet" type="text/css" href="popupbox/modalPopLite.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="popupbox/modalPopLite.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(function () {
$('#popup-wrapper').modalPopLite({ openButton: '#clicker', closeButton: '#close-btn' });
});
// ]]></script>
Zusammen sieht das ganze wie folgt aus:
<head>
<link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">$(function() { $('#gallery a').lightBox(); });</script>
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<link rel="stylesheet" type="text/css" href="popupbox/modalPopLite.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="popupbox/modalPopLite.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(function () {
$('#popup-wrapper').modalPopLite({ openButton: '#clicker', closeButton: '#close-btn' });
});
// ]]></script>
<style type="text/css"></style>
</head>
<body>
<div id="gallery">
<a href="#">
<img src="#" width="650" border="0">
</a>
</div>
<div id="clicker">Click here!</a></div>
<div id="popup-wrapper" style="background-color: #fff;">
Inhalt
<a id="close-btn" href="#">Close</a>
</div>
</body>