0
Ich versuche, Phantasie Box zu einem Mauerwerk Layout hinzufügen, aber das Bild wird nicht in die Phantasie Box-Styling öffnen, öffnet es einfach das Bild auf.Bilder nicht in Fancy Box
Quellcode:
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
<div class="grid-item">
<a class="fancybox" href="images/lg_denali.png" width="800">
<img src="images/denali_outfitters.jpg" width="">
</a>
</div>
</div>
Ich habe die Schritte von http://fancyapps.com/ auf gefolgt, wie man die schicken Box-Dateien zu verknüpfen, die ich herunterladen, so dass ich glaube nicht, das ist die Frage. Ich bekomme beim Laden der Seite keine Konsolenfehler.
jQuery
$document.ready(function(){
$(".fancybox").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
maxWidth: 800,
maxHeight: 'auto'
});
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: 200,
});
});
nicht sicher, was ich falsch hier tue.
Hier sind, wie ich die Dateien verknüpft habe. Vielleicht ist es falsch, wie sie bestellt sind.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="resource-type" content="document" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="classification" content="Internet" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="ALL" />
<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script src="js/custom.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script></head>
Haben Sie alle zugehörigen CSS- und JS-Dateien hinzugefügt? – Uzbekjon
Ich habe aktualisiert, wie meine Kopfmarke aussieht, hoffentlich hilft das. – JoeyBagOfDonuts
Nur eine Anmerkung, laden Sie jquery und bootstrap Javascript-Dateien mehrmals. Es scheint, dass Sie alle erforderlichen CSS-Dateien hinzufügen. – Uzbekjon