Перейти к содержанию
Официальный форум поддержки Simpla

FancyBox в Блоге


Перейти к решению Решено chocolate_moles,

Рекомендуемые сообщения

Доброй ночи . подскажите как правильно подключить FancyBox  в блоге чтоб все загруженные в статью картинки зумились??

 

 

Ет я подключил ,...

{literal}
<script>
$(function() {
	// Зум картинок
	$("a.zoom").fancybox({ 'hideOnContentClick' : true });
});
</script>
{/literal}

но после долгого мозго ламания на этом все )))

Ссылка на сообщение
Поделиться на другие сайты

Добавляю к каждой ссылке клас a.zoom но это как по мне не правльно... можно както автоматизировать процесс? 

Ссылка на сообщение
Поделиться на другие сайты

Добавляю к каждой ссылке клас a.zoom но это как по мне не правльно... можно както автоматизировать процесс?

Как один из вариантов можно воспользоваться регулярным выражением в PHP и перед тем как отправить описание на сервер проверять его и заменять все найденные <a><img... на нужные для вас.
Ссылка на сообщение
Поделиться на другие сайты


<script>
$(function() {
    // Зум картинок
    $("#content a img").parent().fancybox({ 'hideOnContentClick' : true });
});
</script>

 

Ссылка на сообщение
Поделиться на другие сайты

 

<script>
$(function() {
    // Зум картинок
    $("#content a img").parent().fancybox({ 'hideOnContentClick' : true });
});
</script>

Тогда все картинки которые в ссылках контента будут открываться через фенсибокс.

Нужно именно в блоге.

Ссылка на сообщение
Поделиться на другие сайты

Тогда все картинки которые в ссылках контента будут открываться через фенсибокс.

Нужно именно в блоге.

 

Закинуть код в post.tpl?

Ссылка на сообщение
Поделиться на другие сайты

 

<script>
$(function() {
    // Зум картинок
    $("#content a img").parent().fancybox({ 'hideOnContentClick' : true });
});
</script>

К сожалению почему то не сработало , попытался даже взять отдельно в див но тоже не помогло

 

{* Страница отдельной записи блога *}

<!-- Заголовок /-->
<h1 data-post="{$post->id}">{$post->name|escape}</h1>


	
<div class="content">
<!-- Тело поста /-->
{$post->text}
</div>


{literal}
<script>
$(function() {
    // Зум картинок
    $("#content a img").parent().fancybox({ 'hideOnContentClick' : true });
});
</script>{/literal}

Ссылка на сообщение
Поделиться на другие сайты

К сожалению почему то не сработало , попытался даже взять отдельно в див но тоже не помогло

А у Вас случайно не 2 блока с классом content?

Попробуйте переименовать в другой класс, ну и в скрипте поправьте название.

Ссылка на сообщение
Поделиться на другие сайты

К сожалению почему то не сработало , попытался даже взять отдельно в див но тоже не помогло

 

в вашем случае замените # на точку, оставив div на месте

 

# для id, точка для класса.

Ссылка на сообщение
Поделиться на другие сайты

 

в вашем случае замените # на точку

ДА спасибо большое с точкой сработало!  

 

Простите за наглость , но может вы знаете как  больше автоматизировать этот процесс?   :)

 

Было , добавить фото -> взять в ссылку ->ссылаться на это же изображение -> добавить клас

Стало , добавить фото -> взять в ссылку -> ссылаться на это же изображение 

Хотелось добиться только первого пункта ))  Простите за наглость ! )

Ссылка на сообщение
Поделиться на другие сайты

Хотелось добиться только первого пункта ))  Простите за наглость ! )

Тоесть вы хотите просто добавлять фото, без ссылки, и чтобы оно увеличивалось при клики на нем?
Ссылка на сообщение
Поделиться на другие сайты

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

да ))) именно )

Ссылка на сообщение
Поделиться на другие сайты
  • Решение

да ))) именно )

 

<script>
$(".content img").each(function(){
    $(this).fancybox({
        href : $(this).attr('src')
    });
});
</script>
 
Ссылка на сообщение
Поделиться на другие сайты

 

<script>
$(".content img").each(function(){
    $(this).fancybox({
        href : $(this).attr('src')
    });
});
</script>
 

Гениально спасибо бальшое !!!!!!!!!!!! :wub:  :ph34r:  :D  :)

Ссылка на сообщение
Поделиться на другие сайты
  • 2 недели спустя...

Вставил данный скрипт в post.tpl.
Не работает

<script>
$(".content img").each(function(){
$(this).fancybox({
href : $(this).attr('src')
});
});
</script>
 

Может картинку как то не так добавил?

Ссылка на сообщение
Поделиться на другие сайты

Может картинку как то не так добавил?

Картинка должна находиться в блоке

 

<div class="content">
...
</div>
Ссылка на сообщение
Поделиться на другие сайты

 

Картинка должна находиться в блоке

 

<div class="content">
...
</div>

Может поможете в продолжение темы и с этими вопросами ?:) 

http://forum.simplacms.ru/topic/6768-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B2-%D0%B1%D0%BB%D0%BE%D0%B3%D0%B5/

Ссылка на сообщение
Поделиться на другие сайты

чтобы картинки листались

 

<script>
    $(".content img").each(function(){
        $(this).wrap("<a class='fancybox' data-rel='gallery'></a>")
        .parent().attr('href', $(this).attr('src') );
    });

    $('.fancybox').fancybox({
        openEffect : 'none',
        closeEffect : 'none'
    });
</script>

спасибо  

chocolate_moles  !!!!!!!!
Ссылка на сообщение
Поделиться на другие сайты
  • 1 год спустя...

 

<script>
$(".content img").each(function(){
    $(this).fancybox({
        href : $(this).attr('src')
    });
});
</script>
 

 

 

Ребят, а куда это вставлять ? Или вместо чего? Пытался разными способами решить проблему, не удалось...

 

У меня на сайте при клике на картинку - она не увеличивается, а открывается в этом же окне в полном объеме.

То есть клиенту придется нажимать в браузере кнопку назад каждый раз, когда он будет кликать на одну из картинок. Он просто уйдет...

 

Так выглядит мой код в product.tpl

 

 

{literal}
<script>
$(function() {
    $("#features li:even").addClass('even');


    $("a.zoom").fancybox({ 'hideOnContentClick' : true });


    $('select[name=variant]').change(function() {
        price = $(this).find('option:selected').attr('price');
        compare_price = '';
        if(typeof $(this).find('option:selected').attr('compare_price') == 'string')
            compare_price = $(this).find('option:selected').attr('compare_price');
        $(this).find('option:selected').attr('compare_price');
        $(this).closest('form').find('span').html(price);
        $(this).closest('form').find('strike').html(compare_price);
        return false;
    });
});
</script>
{/literal}
 

 

Нужно ли что-то добавлять в post.tpl ? 

Изменено пользователем Darkmaster
Ссылка на сообщение
Поделиться на другие сайты

Ребят, а куда это вставлять ? Или вместо чего? Пытался разными способами решить проблему, не удалось...

 

У меня на сайте при клике на картинку - она не увеличивается, а открывается в этом же окне в полном объеме.

То есть клиенту придется нажимать в браузере кнопку назад каждый раз, когда он будет кликать на одну из картинок. Он просто уйдет...

 

Так выглядит мой код в product.tpl

 

 ...

 

Нужно ли что-то добавлять в post.tpl ? 

 

вы определитесь, вы вставляете в product.tpl или в post.tpl? у вас подключен фансибокс?

 

<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />

это должно быть перед <script> в коде вашем

Изменено пользователем mishanya
Ссылка на сообщение
Поделиться на другие сайты

вы определитесь, вы вставляете в product.tpl или в post.tpl? у вас подключен фансибокс?

 

<script type="text/javascript" src="js/fancybox/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />

это должно быть перед <script> в коде вашем

 

я просто почитал в этой теме, что люди пишут что нужно еще добавлять какойто код в post.tpl

 

 

Помогло! Спасибо большое, Mishanya !!! :)

Изменено пользователем Darkmaster
Ссылка на сообщение
Поделиться на другие сайты

я просто почитал в этой теме, что люди пишут что нужно еще добавлять какойто код в post.tpl

 

 

Помогло! Спасибо большое, Mishanya !!! :)

это в post.tpl для записей блога нужно. а у вас я так понял не работало в товаре просто

Ссылка на сообщение
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

Загрузка...
×
×
  • Создать...