fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-03 16:51:40 +09:00
Code Issues Projects Releases Packages Wiki Activity

Add photoswipe enroll class

Browse source 
`.photoswipe-images` 클래스를 가진 이미지는 강제로 포토스와이프가 적용됩니다.

```html
<a href="https://misol.kr/">
    <img class="photoswipe-images" src="https://example.com/something.jpg" />
</a>
```
와 같은 이미지는 포토스와이프가 적용됩니다.


```html
<a href="https://misol.kr/">
    <img class="photoswipe-images rx-escape" src="https://example.com/something.jpg" />
</a>
```
와 같은 상황에서도 포토스와이프가 적용됩니다.


```html
<a href="https://misol.kr/">
    <img class="rx-escape" src="https://example.com/something.jpg" />
</a>
```

와 같은 코드에서는 포토스와이프가 적용되지 않습니다.(`<a>` anchor 태그의 자식 요소, `rx-escape` 클래스가 있는 항목이기 때문)


```html
<a href="https://misol.kr/">
    <img src="https://example.com/something.jpg" />
</a>
```
와 같은 코드에서도 포토스와이프는 적용되지 않습니다. (`<a>` anchor 태그의 자식 요소이기 때문)
This commit is contained in:
Min-Soo Kim 2016-07-24 16:38:15 +09:00 • committed by GitHub
parent 79abf11e6f
commit f20c75ef09
1 changed files with 14 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

21
addons/photoswipe/rx_photoswipe.js
View file

@ -11,15 +11,22 @@ var getPSImageSize = function(src) {
}
var initPhotoSwipeFromDOM = function(gallerySelector) {
var ps_skip_class = '.rx-escape, .photoswipe-escape';
var ps_skip_elements_array = ['a', 'pre', 'xml', 'textarea', 'input', 'select', 'option', 'code', 'script', 'style', 'iframe', 'button', 'img', 'embed', 'object', 'ins'];
var ps_skip_elements = '';
ps_skip_elements_array.forEach(function(el, i) { ps_skip_elements += el + ' img,'; })
// photoswipe will skip images that have these classes or are children of these elements.
var ps_skip_class = '.rx-escape, .photoswipe-escape',
ps_skip_elements_array = ['a', 'pre', 'xml', 'textarea', 'input', 'select', 'option', 'code', 'script', 'style', 'iframe', 'button', 'img', 'embed', 'object', 'ins'],
ps_skip_elements = '';
ps_skip_elements_array.forEach(function(el, i) { ps_skip_elements += el + ' img,'; });
// Photoswipe will enroll images that have this class, though the image is marked as skip item by criteria above.
var ps_enroll_class = '.photoswipe-images';
// CSS selector for photoswipe items.
var ps_find_selector = 'img:not(' + ps_skip_elements + ps_skip_class + '), img' + ps_enroll_class;
// parse slide data (url, title, size ...) from DOM elements
// (children of gallerySelector)
var parseThumbnailElements = function(el) {
var imgElements = $(el).find("img:not(" + ps_skip_elements + ps_skip_class + ")"),
var imgElements = $(el).find(ps_find_selector),
numNodes = imgElements.length,
items = [],
imgEl,
@ -85,7 +92,7 @@ var initPhotoSwipeFromDOM = function(gallerySelector) {
// find index of clicked item by looping through all child nodes
// alternatively, you may define index via data- attribute
var clickedGallery = $(clickedListItem).closest(gallerySelector).get(0),
childNodes = $(clickedGallery).find("img:not(" + ps_skip_elements + ps_skip_class + ")"),
childNodes = $(clickedGallery).find(ps_find_selector),
numChildNodes = childNodes.length,
nodeIndex = 0,
index;
@ -223,7 +230,7 @@ var initPhotoSwipeFromDOM = function(gallerySelector) {
var regx_skip = /(?:(modules|addons|classes|common|layouts|libs|widgets|widgetstyles)\/)/i;
var regx_allow_i6pngfix = /(?:common\/tpl\/images\/blank\.gif$)/i;
var galleryImgEls = $(galleryElements[i]).find("img:not(" + ps_skip_elements + ps_skip_class + ")");
var galleryImgEls = $(galleryElements[i]).find(ps_find_selector);
for(var j = 0, jl = galleryImgEls.length; j < jl; j++) {
// skip components
if(regx_skip.test($(galleryImgEls[j]).attr('src')) && !regx_allow_i6pngfix.test($(galleryImgEls[j]).attr('src'))) continue;