2016-08-25 3 views
2

У меня есть простой «а» тег в моем HTML, как такColorbox отображения изображения не работает

<a class='gallery' href='image.jpg'>photo</a> 

Мой JQuery это ...

$(document).ready(function() { 
$('a.gallery').colorbox(); 
}); 

Однако, это только открывает изображение в новом окне.

Мой импорт вот так ...

<link rel="stylesheet" href="colorbox.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="jquery.colorbox-min.js"></script> 

Насколько скачать, то я извлеченный его в папку с остальной частью моих файлов сайта.

+1

Вы в том числе JQuery дважды. Удалите один из них. – Tushar

+0

Кроме того, что вы хотите достичь именно, вы ссылаетесь на изображение, поэтому оно открывается, что должно быть, или вы хотите предотвратить перенаправление? В этом случае добавьте 'e.preventDefault()' в ваш jQuery. – Roberrrt

+0

Хорошо, я удалил один из jquery includes. – Doncho

ответ

2

Я думаю, что ваши js ressources не найдены. Попробуйте использовать CDN и проверьте свои js-пути.

Здесь я приведу рабочий пример.

$(document).ready(function() { 
 
    $('a.gallery').colorbox(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script> 
 
<a class='gallery' href='http://www.telegraph.co.uk/content/dam/Travel/galleries/travel/hubs/thebigpicture/the-big-picture-photography-competition-round-393/Fary-Afshar-xlarge.jpg'>photo</a>

Смежные вопросы