Фотогалерея типа лайтбокс на внешнем сайте/CSM

Прошло более 3 лет с тех пор, как я написал какой-либо код, поэтому извините меня, если это выглядит глупо. Мне разрешено публиковать контент на внешнем сайте (например, http://www.example.com), который я не контролируй. Мой контент может быть в HTML, CSS и JS. У меня есть куча фотографий в Dropbox, которые я хочу загрузить на свою страницу контента (http://www.example.com/MyContentPage). На этой странице используется jQuery (я проверял).

У меня есть изображения в дропбоксе, и я загружаю их в список, но по мере увеличения количества изображений я хочу загрузить их как галерею. Но я не контролирую корневую папку и относительные пути. Следовательно, любой JS/CSS/Image, который мне нужен, должен быть размещен в Dropbox или из другого домена (на который нужно ссылаться на моей странице CMS).

Когда я смотрел на лайтбокс (https://github.com/lokesh/lightbox2/), я вижу, что он поставляется со всеми необходимыми папками, но, поскольку я не могу «установить» лайтбокс2, мне интересно, есть ли для меня более простой способ сделать фотогалерею с лайтбоксом (или чем-то подобным). Я думаю, что изменение относительных путей для css и изображений в лайтбоксе2 может сработать, но я не знаю. Был бы очень признателен за любые идеи.

Спасибо.


jquery cross-domain lightbox cross-site lightbox2
person ram    schedule 05.09.2014    source источник
comment
Не должно быть проблем с тем, чтобы просто разместить код лайтбокса на другом сайте и использовать абсолютные пути для вызова этих файлов из файлов на example.com. В качестве альтернативы вы можете использовать cdnjs, на котором размещены все файлы lightbox2: cdnjs.com/libraries/lightbox2 или это не вопрос?   -  person 0x6C77    schedule 08.09.2014

Ответы (3)


arrow_upward
1
arrow_downward

Вам не нужно «устанавливать» скрипт — достаточно указать на ресурсы JS и CSS, расположенные в другом месте в сети. Вы даже можете поместить их в свою учетную запись DropBox и ссылаться на них оттуда (при условии, что DropBox никаким образом не препятствует этому, но поскольку они, кажется, не имеют ничего против использования для размещения изображений, почему они должны возражать, когда вы делаете то же самое с некоторые файлы JS/CSS).

Другим вариантом может быть поиск выделенного CDN, на котором размещаются эти файлы для вас — для обычных скриптов есть несколько сервисов, которые уже делают это… независимо от того, есть ли один из них, на котором размещен этот конкретный скрипт, вам придется исследовать. (Чего вам не следует делать, так это ссылки на файлы прямо на github — они явно не хотят использоваться в качестве CDN для таких случаев.)

person CBroe    schedule 08.09.2014

arrow_upward
0
arrow_downward

В вашем html-файле поместите следующее (все размещено на CDN) в голове:

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/magnific-popup.css"> 

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ ===> Optional if your site has jQuery already but 
Check what version of jQuery your example.com site has-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.11/jquery.min.js"></script> 

<!-- Magnific Popup core JS file -->
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js"></script> 
<script>
$(document).ready(function() {
$('.gallery').magnificPopup({
type:'image',
gallery:{
enabled:true
}
});
});
</script>

Это html для ваших изображений:

<div class="gallery">
<a href="path-to-image.jpg">Open image 1 (gallery #1)</a><!-- can be absolute path -->
<a href="path-to-image.jpg">Open image 2 (gallery #1)</a>
<!-- more links  -->
</div>

Пример jsFiddle

Вы также можете разместить css и js из своего дропбокса. Вам просто нужно ввести ссылку. Для получения дополнительной информации о Magnific-Popup: Magnific-Popup Docs

person Macsupport    schedule 11.09.2014

arrow_upward
0
arrow_downward

Мне нравится использовать Featherlight (http://noelboss.github.io/featherlight/)

Существует также вариант галереи, но он позволяет вам извлекать источники данных из внешнего источника, такого как CDN. Кроме того, он очень маленький, так что вы можете оптимизировать свой сайт.

person Ezos    schedule 12.09.2014