Joma
Neues Mitglied
Hi, ich hab momentan ein Problem mit meiner lightbox Fotogalerie, nachdem ich ein script eingefügt habe. hier ein html beispiel, wie die galerie eigentlich aussehen sollte: http://jomabeats.com/tdfts/test.html.
hier könnt ihr sehen, dass alle thumbs schön ordentlich nebeneinander stehen ;). ich hab jetzt aber ein kleines javascript zu der seite hinzugefügt, damit die navigation richtig funktioniert: http://jomabeats.com/tdfts/. wenn ihr jetzt auf portfolio klickt und dann auf logodesign, könnt ihr sehen, dass alle thumbs jetzt untereinanderstehen. irgendwas muss die breite der einzelnen bilder geändert haben. ich kann mir das nicht erklären :(
hier nochmal der code in kurzform (nur die relevanten sachen):
vielen dank im voraus
hier könnt ihr sehen, dass alle thumbs schön ordentlich nebeneinander stehen ;). ich hab jetzt aber ein kleines javascript zu der seite hinzugefügt, damit die navigation richtig funktioniert: http://jomabeats.com/tdfts/. wenn ihr jetzt auf portfolio klickt und dann auf logodesign, könnt ihr sehen, dass alle thumbs jetzt untereinanderstehen. irgendwas muss die breite der einzelnen bilder geändert haben. ich kann mir das nicht erklären :(
hier nochmal der code in kurzform (nur die relevanten sachen):
HTML:
<!doctype html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head>
<body>
<div class="hidden" id="portfolio">
<a id="RenderLogodesign_Btn">logo design</a>
<a id="RenderVideofx_Btn">video fx</a>
<a id="RenderWebdesign_Btn">webdesign</a>
<div class="hidden" id="logodesign">
<div class="image-row">
<div class="image-set">
<a href="img/logos/01.jpg" data-lightbox="example-set"><img src="img/logos/thumb-01.jpg" alt="i'm broken :'(" width="94" height="142" title="click me ;)"/></a>
<a href="img/logos/02.jpg" data-lightbox="example-set"><img src="img/logos/thumb-02.jpg" alt="i'm broken :'(" width="94" height="142" title="click me ;)"/></a>
<a href="img/logos/03.jpg" data-lightbox="example-set"><img src="img/logos/thumb-03.jpg" alt="i'm broken :'(" width="94" height="142" title="click me ;)"/></a>
<a href="img/logos/04.jpg" data-lightbox="example-set"><img src="img/logos/thumb-04.jpg" alt="i'm broken :'(" width="94" height="142" title="click me ;)"/></a>
</div>
<div class="image-row">
<a href="img/logos/05.jpg" data-lightbox="example-set"><img src="img/logos/thumb-05.jpg" alt="i'm broken :'(" width="94" height="142" title="click me ;)"/></a>
<a href="img/logos/06.jpg" data-lightbox="example-set"><img src="img/logos/thumb-06.jpg" alt="i'm broken :'(" width="94" height="142" title="click me ;)"/></a>
<a href="img/logos/07.jpg" data-lightbox="example-set"><img src="img/logos/thumb-07.jpg" alt="i'm broken :'(" width="94" height="142" title="click me ;)"/></a>
</div>
</div>
</div>
<div class="hidden" id="videofx">
<p>videofx bla</p>
</div>
<div class="hidden" id="webdesign">
<p>webdesign bla</p>
</div>
</div>
<script type="text/javascript">
var logodesignDiv = document.getElementById('logodesign');
var videofxDiv = document.getElementById('videofx');
var webdesignDiv = document.getElementById('webdesign');
var logodesignBtn = document.getElementById('RenderLogodesign_Btn');
var videofxBtn = document.getElementById('RenderVideofx_Btn');
var webdesignBtn = document.getElementById('RenderWebdesign_Btn');
logodesignBtn.onclick = function() {
logodesignDiv.setAttribute('class', 'visible');
videofxDiv.setAttribute('class', 'hidden');
webdesignDiv.setAttribute('class', 'hidden');
};
videofxBtn.onclick = function() {
logodesignDiv.setAttribute('class', 'hidden');
videofxDiv.setAttribute('class', 'visible');
webdesignDiv.setAttribute('class', 'hidden');
};
webdesignBtn.onclick = function() {
logodesignDiv.setAttribute('class', 'hidden');
videofxDiv.setAttribute('class', 'hidden');
webdesignDiv.setAttribute('class', 'visible');
};
</script>
</body>
</html>vielen dank im voraus