외부 호스팅 사이트에서 라이트 박스형 포토 갤러리/CSM

Question

코드를 작성한 지 3 년이 지나서 3 년이 지나서 바보가 되더라도 용서해주십시오. 내가 통제하지 않는 외부 호스팅 사이트 (예 : http://www.example.com)에 콘텐츠를 올릴 수 있습니다. 내 콘텐츠는 HTML, CSS 및 JS 일 수 있습니다. 내 콘텐츠 페이지 (http://www.example.com/MyContentPage)에로드하려는 Dropbox에 사진 모음이 있습니다. 이 페이지는 jQuery (나는 그것을 검사했다)를 사용한다.

나는 이미지를 보관함에 보관하고 목록에로드하지만 이미지 수가 늘어남에 따라 이미지를 갤러리로로드하려고합니다. 하지만 루트 폴더와 상대 경로는 제어하지 않습니다. 따라서 내가 필요로하는 모든 JS/CSS/Image는 Dropbox 또는 다른 도메인 (CMS 페이지에서 참조해야 함)에서 호스팅되어야합니다.

Lightbox (https://github.com/lokesh/lightbox2/)를 보면 필요한 모든 폴더가 있지만 lightbox2를 "설치할"수 없기 때문에 lightbox (또는 이와 비슷한 것)가있는 photogallery를 만드는 더 쉬운 방법이 있는지 궁금합니다. 라이트 박스 2에서 CSS와 이미지의 상대 경로를 변경하면 효과가 있을지 모르지만 저는 잘 모릅니다. 대단히 감사하게 생각합니다.

감사합니다.

Answer 1

스크립트를 "설치"할 필요가 없습니다. 그물에있는 JS 및 CSS 리소스 만 있으면 충분합니다. DropBox 계정에 그들을 배치하고 거기에서 참조 할 수도 있습니다 (DropBox가 어떤 식 으로든 이것을 막지는 않는다고 가정하고 있지만 이미지를 호스트하는 데 사용되는 것에 대해 아무런 이유가없는 것 같으므로, 같은 것을 할 때 왜 반대해야합니까? 일부 JS/CSS 파일).

다른 옵션은 해당 파일을 호스팅하는 전용 CDN을 찾는 것입니다. 일반적인 스크립트의 경우 이미 수행하는 몇 가지 서비스가 있습니다.이 특정 스크립트를 호스팅하는지 여부에 관계없이 연구하기. (당신이하지 말아야 할 것은 직접 github에있는 파일에 대한 링크입니다 - 명시 적으로 CDN으로 사용되기를 원하지 않습니다.)

Answer 2

html 파일에 다음을 넣으십시오 (모두 CDN) 머리 :

<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 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입니다 상자. 링크를 입력하기 만하면됩니다. Magnific - 팝업에 대한 추가 정보를 원하시면 : Magnific-Popup Docs

Answer 3

내가 Featherlight를 사용하려면이 (http://noelboss.github.io/featherlight/)

또한 갤러리 옵션이 있습니다, 그러나 당신이 그런 같은 outisde 소스에서 데이터 소스를 당길 수 있습니다 CDN. 또한 매우 작기 때문에 웹 사이트를 최적화 된 상태로 유지할 수 있습니다.