Главные новости

Скрипты галереи для cmscode

Скрипты галереи для cmscode
Чтобы галерея отображалась как надо для начала добавим css представлнное ниже в файл выбранного шаблона 
к примеру у нас в шаблоне который расположен в папке templates/shablon.html есть такая строка 
<link rel="stylesheet" type="text/css" href='<?php echo"$p".'templates/Ferstthem/Ferstthem_main.css';?>' media="screen"/>
по ней мы узнаем что файл css данного шаблона лежит в папке templates/Ferstthem/Ferstthem_main.css открываем его и вставляем в конец данного css эти строки:

Ссылки на архивы каждых выводов галерей лежат в конце статьи перед галерей. 

 
.k2_gallery{ margin:5px 0px 0px 5px; width: 175px;
height: 111px;
border: 1px solid;
text-align: center;
padding: 4px;
border: 1px solid #ccc;
float:left;
}

.k2_gallery img {
max-width: 175px;
max-height: 111px;
width:175px;height:111px;
background-size:cover;}

Сохранив измененный css файл.

Так же вам надо подключить fancybox для красивого отображения картинок галереи в увеличенном масштабе. В демо шаблоне 1.031 данный fancybox подключен по умолчанию 
вот его строки которые находятся в head шаблона

<script type="text/javascript" src="<?php echo"$p".'templates/lib/jquery-1.10.1.min.js';?>"></script> - отвечает за подключение jquery

<script type="text/javascript" src="<?php echo"$p".'templates/Ferstthem/lib/jquery.mousewheel-3.0.6.pack.js';?>"></script>
<script type="text/javascript" src="<?php echo"$p".'templates/Ferstthem/source/jquery.fancybox.js?v=2.1.5';?>"></script>
<link rel="stylesheet" type="text/css" href="<?php echo"$p".'templates/Ferstthem/source/jquery.fancybox.css?v=2.1.5';?>" media="screen" />
<script type="text/javascript">$(document).ready(function() {$('.fancybox').fancybox({'type' : 'image'});$(".fancybox-effects-a").fancybox({helpers: {title : {type : 'outside'},overlay : {speedOut : 0}}});});
$("#tip6").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'autoScale' : false, 'type' : 'iframe', 'width' : 500, 'height' : 315, 'scrolling' : 'no'
});
</script>

<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}</style>


проверяем скрипт вывода полной статьи что там есть строки такого вида. (скрипт вывода полной статьи находится в аналоге к2 по ссылке в виде картинки  там выберите шаблон 1 и проверьте есть ли такой код если есть то норм если нет то вставляем предложенный код ниже и сохраняем.)

пример кода для вывода галереи 1

 
$asdk=$p.'file/gallery/'.$dfsdg[17].'/'.$dfsdg[0].'.zip'; clearstatcache ();
if(file_exists($asdk)){ $vd=explode('|',$dfsdg[11]);
$vsegoooo=count($vd);
echo '<h4>Галерея</h4>';
for($z=0;$z< $vsegoooo;$z++){
$base=base64_encode($p.'|'.$vd[$z].'|'.'file/gallery/'.$dfsdg[17].'/'.$dfsdg[0].'.zip');
$base=str_replace('+',"_1_",$base);
$base=str_replace('/',"_2_",$base);
$base=str_replace('=',"_3_",$base);
echo'<div class="k2_gallery"><a class="fancybox" rel="group" href="'.$p.'modul/mod_k2gallery/foto.html'.$base.'.jpg" title="'.$vd[$z].'"><img src="'.$p.'modul/mod_k2gallery/foto.html'.$base.'" alt="$vd[$z]"/></a></div>';
}
}

Данный скрипт проверяет загружен ли zip архив jpg фоток, если да то выводит их в виде галереи. Группируйте фотки в зависимости от ширины вашего блока полной статьи. Если фотки не влазят то правим css стиль представленный выше.
Ширину фотки и дива регулируем чтобы добиться в 3 или 4ре фотки вряд, а далее  создаем zip архив из jpg фоток и вставляем в редакторе статьи и выбираем перезалить галерею и нажимаем сохранить статью и все галерея выведется красиво.

Пример 2 код для компонента статичного сайта.

Данный код необходим чтобы статичная версия формировалась и выводила в статике галерею. Вот почему вывод тут отличается и требуется js включенный в браузере пользователя.
 
$asdk=$p.'file/gallery/'.$dfsdg[17].'/'.$dfsdg[0].'.zip'; clearstatcache ();
if(file_exists($asdk)){
include $p.'modul/mod_k2gallery/gallery1.html';
$vd=explode('|',$dfsdg[11]);
$vsegoooo=count($vd);
echo '<h4>Галерея</h4>';?>

 

<script>
function g(id) {
var str = gallery[id];
var name=gallery[""+id+"_"];

var temp='<div class="k2_gallery"><a class="fancybox" rel="group" href="data: image/jpg;base64,'+str+'" title="'+name+'"><img src="data: image/jpeg;base64,'+str+'" alt="'+name+'" /></a></div>';
document.write(temp);

}
var gallery = [];</script>
<?php
for($z=0;$z< $vsegoooo;$z++){
$archive = new PclZip($p.'file/gallery/'.$dfsdg[17].'/'.$dfsdg[0].'.zip');
$list=$archive->extract(PCLZIP_OPT_BY_NAME, $vd[$z],PCLZIP_OPT_EXTRACT_AS_STRING);
$base=base64_encode($list[0]['content']);
echo '<script>
gallery["'.$z.'_"]="'.$vd[$z].'";
gallery["'.$z.'"]="'.$base.'";
g('.$z.');</script>';

if ($list == 0) {
echo "ERROR : ".$archive->errorInfo(true);
} }
}



На данный момент вы можете видоизменять под себя скрипт вывода галереи придавать стили или класс к надписи 
'<h4 class="название вашего класса"  style="вашь стиль">Галерея</h4>'

Так же можете поставить ссылку якорь к галереи чтобы к примеру делать ссылку на страницу и сразу опускаться к просмотру галререи
О всех настройках fancybox вы можете прочесть на его официальном сайте     
архив примера 2              архив примера 1 

Как распаковать архив и проверить на своем сайте. 
1)распаковать архив открыть файл 1.txt 
2)проверяем скрипт вывода полной статьи что там есть строки такого вида. (скрипт вывода полной статьи находится в аналоге к2 по ссылке в виде картинки там выберите шаблон 1 и заменяем его содержимое на то что было в архиве и нажимаем кнопку сохранить
3) выбираем категорию и редактировать нажимаем и выбираем данный Скрипт вывода статей 1 и нажимаем сохранить и только тогда данная категория пересохранит его для себя как ей надо и проходим в данную категорию -> в статью и смотри результат. Чтобы увидеть результат вам надо в выбранную статью залить галерею  в zip архиве которой лежат фотки jpg формата. Если фотка не открывается или битая, то кажется вам придется ее пересохранить в jpg любым редактором и заново перезалить в статью её с заменой старой галереи.
Смотрите пример работы данного скрипта снизу и в видео уроке.
8

Галерея