Ich habe 2 Stunden lang versucht, FancyBox zum Laufen zu bringen und habe keine Ahnung, wie es nicht funktioniert. Offensichtlich fehlt mir etwas, weil es nur auf das Bild verweist.
Beispiel: Ich verknüpfe das Bild mit meinem Bilderordner (sowohl mit dem Daumen als auch mit dem großen Bild). Wenn ich auf das Bild klicke, gehe ich nur zu einer neuen Seite und zeige das Bild, anstatt es zu öffnen.
Hier ist mein Code:
<head>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn"t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/jquery.fancybox.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.css" media="screen"/>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-media.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox();
});
</script></head>
<div class="row">
<div class="col-md-6">
<div class="portfolio-item">
<a class="fancyImg" href="img/portfolio-2.jpg" title="Lorem ipsum dolor sit amet"><img src="/images/img/portfolio-2.jpg" alt="" /></a>
</div>
</div>
Antworten:
0 für die Antwort № 1Das Erste, was ich sehe, ist, dass Sie die Fancybox zweimal laden. Wähle eins.
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>
0 für die Antwort № 2
Innerhalb des HTML-Body-Abschnitts habe ich diesen Code hinzugefügt
<a class="fancyImg" href="img1.jpg" title="Lorem ipsum dolor sit amet"><img src="/images/img1.jpg" alt="" /></a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox();
type:"iframe"
});
</script>
Und es scheint gut zu funktionieren :)