Hallo,
falls sich jemand mit "Photoswipe" auskennt, würde ich gerne wissen, wieso die Bilder nicht dementsprechend geladen werden.
Habe eine mobile Galerie erstellt, doch leider lädt das Plugin die Fotos als extra Seite, anstelle sie einfach einzublenden.
Hier der Link: (nach laden einmal F5 bitte)
http://poure.eu/mobile.fitness_world/fotos.html
und hier der Quellcode dazu:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fitness World Rodgau - Fotos (Mobil)</title>
<!-- jQuery Mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<!-- WebApp Deifnition -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- Apple -->
<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad.png" sizes="72x72" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone-retina.png" sizes="114x114" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-ipad-retina.png" sizes="144x144" />
<link rel="apple-touch-icon-precomposed" href="bilder/icon-iphone.png" />
<!-- CSS Formatierung individuell -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- google FONT API -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- Fotos / Galerie -->
<link href="css/styles_galerie.css" type="text/css" rel="stylesheet" />
<link href="css/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/klass.min.js"></script>
<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
}, false);
}(window, window.Code.PhotoSwipe));
</script>
</head>
<body>
<div data-role="page" id="fotos">
<div data-role="header" data-theme="a" data-position="fixed"><a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-position="fixed"data-tap-toggle="false">Hier wird kein Text angezeigt</a><h1 style="font-size: 1em;">Fotos</h1></div> <!-- HEADER -->
<div data-role="content" data-theme="a">
<ul id="Gallery" class="gallery">
<li><a href="img/full/full_001.jpg" rel="external"><img src="img/thumb/thumb_001.jpg" alt="Kursraum" /></a></li>
<li><a href="img/full/full_002.jpg" rel="external"><img src="img/thumb/thumb_002.jpg" alt="Solarium" /></a></li>
<li><a href="img/full/full_003.JPG" rel="external"><img src="img/thumb/thumb_003.jpg" alt="Ausdauer" /></a></li>
<li><a href="img/full/full_004.JPG" rel="external"><img src="img/thumb/thumb_004.jpg" alt="Butterfly" /></a></li>
<li><a href="img/full/full_005.JPG" rel="external"><img src="img/thumb/thumb_005.jpg" alt="Zirkel" /></a></li>
<li><a href="img/full/full_006.JPG" rel="external"><img src="img/thumb/thumb_006.jpg" alt="Hantelbereich" /></a></li>
</ul>
</div> <!-- CONTENT -->Die Anleitung gibts bei google unter dem Suchwort "photoswipe", doch irgendwo steckt ein Fehler, bei mir!
Merci!
