Johanneseines
Neues Mitglied
Hallo zusammen,
das ist meine erste Frage hier und meine Kenntnisse sind doch sehr beschränkt. Ich habe mir ein template für eine html5 Seite runtergeladen und nach meinen Bedürfnissen angepasst. Soweit kein Problem. Dann habe ich mir eine Bildergalerie runtergeladen (unter: least.js - Random & Responsive HTML 5, CSS3 Gallery with LazyLoad ) und in eine Unterseite eingefügt. Das sieht alles super aus und funktioniert auch tadellos, aber leider erst wenn man scrollt oder klickt. Davor werden alle Bilder nur als kleine Punkte dargestellt (alle in einer Reihe) und wenn man mit der maus über einen Punkt fährt, sieht man das thumb. Scrollt oder klickt man auf eines der bilder erscheint die Galerie so wie sie soll und funktioniert auch.
Ich schätze, das der entsprechende js code im entscheidenden moment nicht aktiv ist oder vlt. ein falscher? Vlt. liege ich aber auch ganz falsch?
Der Html code im head sieht folgendermaßen aus:
Dann kommt das Menü des templates und dann die Galerie:
Kann mir dazu jemand etwas sagen? welche Infos braucht ihr noch um etwas sagen zu können?
Vielen Dank
Johannes
das ist meine erste Frage hier und meine Kenntnisse sind doch sehr beschränkt. Ich habe mir ein template für eine html5 Seite runtergeladen und nach meinen Bedürfnissen angepasst. Soweit kein Problem. Dann habe ich mir eine Bildergalerie runtergeladen (unter: least.js - Random & Responsive HTML 5, CSS3 Gallery with LazyLoad ) und in eine Unterseite eingefügt. Das sieht alles super aus und funktioniert auch tadellos, aber leider erst wenn man scrollt oder klickt. Davor werden alle Bilder nur als kleine Punkte dargestellt (alle in einer Reihe) und wenn man mit der maus über einen Punkt fährt, sieht man das thumb. Scrollt oder klickt man auf eines der bilder erscheint die Galerie so wie sie soll und funktioniert auch.
Ich schätze, das der entsprechende js code im entscheidenden moment nicht aktiv ist oder vlt. ein falscher? Vlt. liege ich aber auch ganz falsch?
Der Html code im head sieht folgendermaßen aus:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>galerie</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/camera.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<!-- add styles -->
<link href="css/least.min.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="js/jquery.min.js"></script>
<script src="js/least.min.js"></script>
<script src="js/jquery.lazyload.js"></script>
<!--[if lt IE 8]>
<div style='text-align:center'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/img/upgrade.jpg"border="0"alt=""/></a></div>
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<script type="text/javascript" src="js/jquery.mobile.customized.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/docs.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
<![endif]-->
</head>Dann kommt das Menü des templates und dann die Galerie:
Code:
<section>
<ul id="gallery">
<li id="fullPreview"></li>
<li>
<a href="images/xbox360-hochkant-rot.jpg"></a>
<img data-original="images/t1.jpg" src="img/effects/white.gif" alt="Photo 1" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li><h2>x-box360</h2></li>
<li><p>deep black</p></li>
</ul>
</div>
<div class="projectInfo">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</div>
</li>
<li>
<a href="images/p2.jpg"></a>
<img data-original="images/t2.jpg" src="img/effects/white.gif" alt="Photo 2" />
<div class="overLayer"></div>
<div class="infoLayer">
<ul>
<li><h2>Photo 2</h2></li>
<li><p>View</p></li>
<li><p>it</p></li>
</ul>
</div>Kann mir dazu jemand etwas sagen? welche Infos braucht ihr noch um etwas sagen zu können?
Vielen Dank
Johannes
