Допомога у програмуванні, відповіді на питання / Javascript / FancyBox не «з’явиться» - javascript, jquery, twitter-bootstrap, fancybox

FancyBox не «поп» - javascript, jquery, twitter-bootstrap, fancybox

Я 2 години намагаюся змусити FancyBox працювати і не маю поняття, як це не працює. Очевидно, мені щось не вистачає, тому що це просто посилання на зображення.

Приклад: я пов'язую зображення з папкою своїх зображень (як великий палець, так і велике зображення), і коли я натискаю зображення, воно просто переводить мене на нову сторінку і показує мені зображення, а не вискочує.

Ось мій код:

<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>

Відповіді:

0 для відповіді № 1

Перше, що я бачу, це те, що ви два рази завантажуєте фантазію. Вибрати один.

 <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 для відповіді № 2

Всередині розділу html я додав цей код

<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>

І це, здається, працює нормально :)