Лайтбокс тип фотогалереи на внешнем размещенном сайте/CSM

Question

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

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

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

Спасибо.

Answer 1

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

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

Answer 2

В вашем 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 Example

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

Answer 3

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

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