jemali_m Jun 7 2015 at 14:47

Галерея изображений Flickr с помощью Shortcode API

5 min

6.7K

WordPress*

Tutorial

Recovery Mode

Comments 14

MetaDone Jun 7 2015 at 20:19

Для справки — код вида

return '<div style="position: relative; padding-bottom: 71%; height: 0; overflow: hidden;"><div id="galleria"></div></div><script>var speed=5000;var clickNext=true;Galleria.loadTheme("//cdn.jsdelivr.net/galleria/1.4.2/themes/classic/galleria.classic.js");Galleria.on("image",function(e){var img=e.imageTarget;var picSource=$(img).attr("src");if(picSource==undefined){picSource=$("img:first").attr("src");}
var slashPieces=picSource.split("/");var lastSlash=(slashPieces[slashPieces.length-1]);var lastPieces=lastSlash.split("_");});Galleria.run("#galleria",{responsive:true,preload:4,initialTransition:"fade",debug:true,idleMode:false,pauseOnInteraction:true,fullscreenDoubleTap:true,backlink:false,transition:"fadeslide",showInfo:true,showCounter:true,clicknext:clickNext,thumbnails:true,flickr:"set:' . $set . '",height:0.7,flickrOptions:{description:true,max:100,imageSize:"big",sort:"interestingness-desc",thumbSize:"thumb",},extend:function(){var gallery=this;this.$("image-nav-right").click(function(){if(speed){if(!gallery.isPlaying()&&!clickNext){gallery.play();}
else if(clickNext){if(!gallery.isPlaying()){gallery.play();}}}});this.$("thumb-nav-left, thumb-nav-right").click(function(){if(gallery.isPlaying()){gallery.pause();}});$("#flick").click(function(){gallery.pause();});}});$(document).ready(function(){var iOS=(navigator.userAgent.match(/(iPad|iPhone|iPod)/g)?true:false);var layout="responsive";});</script>';

следует отрефакторить, потому что некошерно выдавать html и javascript код подобным методом. Понимаю, что код сгенерированный, но смотрится ужасно и с первого взгляда непонятно что делает.

jemali_m Jun 7 2015 at 20:57

То есть скинуть на новую строку в PHP коде )) Вы же понимаете?

MetaDone Jun 8 2015 at 05:11

?>
<div style="position: relative; padding-bottom: 71%; height: 0; overflow: hidden;">
<div id="galleria"></div>
</div>
<script>
var speed=5000;
var clickNext=true;
Galleria.loadTheme("//cdn.jsdelivr.net/galleria/1.4.2/themes/classic/galleria.classic.js");
Galleria.on("image",function(e){
var img=e.imageTarget;
var picSource=$(img).attr("src");if(picSource==undefined){picSource=$("img:first").attr("src");
}
var slashPieces=picSource.split("/");
var lastSlash=(slashPieces[slashPieces.length-1]);
var lastPieces=lastSlash.split("_");});
Galleria.run("#galleria",{responsive:true,preload:4,initialTransition:"fade",debug:true,idleMode:false,pauseOnInteraction:true,fullscreenDoubleTap:true,backlink:false,transition:"fadeslide",showInfo:true,showCounter:true,clicknext:clickNext,thumbnails:true,flickr:"set:<?php echo $set ?>",height:0.7,flickrOptions:{description:true,max:100,imageSize:"big",sort:"interestingness-desc",thumbSize:"thumb",},extend:function(){var gallery=this;this.$("image-nav-right").click(function(){if(speed){if(!gallery.isPlaying()&&!clickNext){gallery.play();}
else if(clickNext){if(!gallery.isPlaying()){gallery.play();}}}});this.$("thumb-nav-left, thumb-nav-right").click(function(){if(gallery.isPlaying()){gallery.pause();}});$("#flick").click(function(){gallery.pause();});}});
$(document).ready(function(){var iOS=(navigator.userAgent.match(/(iPad|iPhone|iPod)/g)?true:false);var layout="responsive";});
</script>
<?php

В таком виде если отформатировать то уже лучше смотрится

jemali_m Jun 8 2015 at 05:15

Исправил.

MetaDone Jun 8 2015 at 05:17

не совсем так как я имел в виду, но теперь хоть читабельно

kovalevsky Jun 8 2015 at 07:34

Простите, а зачем переподключать jQuery или что-то править?

(function ($) {
    // $ = jQuery
}(jQuery));

или

jQuery(document).ready(function ($) {
    // $ = jQuery
});

Вас такое чем конкретно не устраивает, чтоб второй раз jQuery загружать?

Собственно в документации ф-ции, которую Вы приводите в коде это и так написано — codex.wordpress.org/%D0%A1%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA_%D0%BF%D0%BE_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F%D0%BC/wp_enqueue_script

jemali_m Jun 8 2015 at 08:19

Нет, вы не поняли. В любом, том или ином случае необходимо править jQuery, то бишь вносить свои дополнения. В моем случае я остановился на переподключении jQuery и jQuery.migrate из CDN, так как считаю данное решение для себя более приемлемым относительно других подключаемых библиотек.
В начале поста было написано, что делалось на скорую руку. Доработок или настроек данного решения можно перечислять сколько угодно, каждому свое. Не судите строго )

kovalevsky Jun 8 2015 at 08:34

Честно — вообще не вижу случаев, тем более здесь, чтоб править jQuery.

Я бы Ваш код поправил. Например, у Вас там галерея по ID. А что если Вы вставите несколько галерей на страницу? Скорее всего не будет работать, так ещё и кашу из JS и HTML продублирует в кол-ве вставленных шорткодов.

У Вас там две переменных, speed и clickNext, которыми Вы засоряете window, их любой другой плагин может перезаписать.
Если бы Вы обернули код, как я предложил выше — (function ($) {}(jQuery));, то, как минимум, не нужно было бы мутить с jQuery и не пихали бы всё в глобальный скоуп.

Далее — раз уже у вас захардкорено всё в куче, то и ID у галереи можно хоть чем-нибудь разбавить, чтоб можно было вставить несколько шорткодов.

jemali_m Jun 8 2015 at 09:14

Не спорю, так и есть! Я же говорю — «доработок или настроек данного решения можно перечислять сколько угодно, каждому свое».
А вот на счет «разбавить», то я готов выслушать ваше предложение.

kovalevsky Jun 8 2015 at 11:54

Ну смотрите, Вы можете к ID блока с галереей добавлять timestamp, пропускать название через uniqid(), таким образом у Вас не 100% не будет 2х одинаковых ID на странице, соответственно Вы сможете загрузить две или более галереи на страницу.

Всё это дело всё равно в PHP забито, так что Вы просто можете сделать что-то подобное:

// ...
$id = uniqid('galleria');
// ...
// <div id="galleria"></div> меняем на:
<div id="$id"></div>
// в JS части 
// Galleria.run("#galleria", { меняем на
Galleria.run("$id", {

Вот по примеру такого псевдокода должно решить проблему.

kovalevsky Jun 8 2015 at 11:58

А вообще, в идеале конечно к этому всему добавить класс, JS в отдельный файл, а там уже что-то вроде:

$('.galleria').each(
   Galleria.run(this.id, // ...
);

Было бы куда лучше. У Вас бы весь этот код не дублировался бы на каждый вызов шорткода.

jemali_m Jun 8 2015 at 12:18

Надо будет по этому принципу доработать. Я, если честно, даже не задумывался о вставке более одной галереи, но вы реально заставили уделить этому внимание.

kovalevsky Jun 8 2015 at 13:33

Я этими плагинами на хлеб зарабатываю :)
Так что если думаете релизить его на вп.орг, то Вам ещё много работы предстоит

jemali_m Jun 8 2015 at 13:43

Нет нет нет..., это просто мелочь. Я увлекаюсь разными CMS и CMF, а ВордПресс действительно неплох со своим API. Что касается плагинов, то более или менее нужные — все из них здорово грузят сервер. К примеру, в своем первом посте я уже описывал громоздкость Jetpack.
Так что плагины плагинами, а вот такие мелочи вроде описанной в данном посте никогда не помешают.