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

Вставка в шаблоны javascript и jquery сценариев


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

Сайт: http://magest.bget.ru/

Читал подобные темы на форуме но ответа для себя так и не нашел. Необходимо вместо стандартного javascript увеличителя картинок, поставить сторонний в шаблон товара product.tpl.

 

Вставляю в начало шаблона product.tpl код:

{literal}

<script>
   jQuery(function(){
       $(".my-foto").imagezoomsl({
          zoomrange: [2.12, 12],
          magnifiersize: [530, 340],
          scrollspeedanimate: 10,
          loopspeedanimate: 5,
          cursorshadeborder: "10px solid black",
          magnifiereffectanimate: "slideIn"              
      });
   });   
</script>

{/literal}

Сам скрипт подключаю из index.tpl

<script type="text/javascript" src="design/{$settings->theme}/js/jquery-1.8.2.min.js"></script>

Вот код картинки в шаблоне product.tpl:

 

    <!-- Большое фото -->
    {if $product->image}
    <div class="image">
        <a href="{$product->image->filename|resize:200:200:w}"><img class="my-foto" src="{$product->image->filename|resize:200:200}" data-large="{$product->image->filename|resize:800:800}" alt="{$product->product->name|escape}" /></a>
    </div>
    {/if}
    <!-- Большое фото (The End)-->

 

Но в шаблоне product.tpl страница товара: http://magest.bget.ru/products/adsw при наведении на картинку увеличенного изображения нет. В чем может быть проблема? заранее благодарен за любую помощь.

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

Может я чего-то не понимаю но где второй раз. Я нашел только один раз в index.tpl

{* JQuery *}
    <script src="js/jquery/jquery.js"  type="text/javascript"></script>

А почему не срабатывает увеличение на шаблоне product.tpl на странице http://magest.bget.ru/products/adsw ?

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

Блин, вы вообще в курсе, о чем говорите??

	<script src="js/jquery/jquery.js"  type="text/javascript"></script>
	
		
 <script type="text/javascript" src="design/test/js/jquery-1.8.2.min.js"></script>
Ссылка на сообщение
Поделиться на другие сайты

Я извиняюсь за то, что я не понимаю простых вещей, вот мой файл index.tpl

{* JQuery *}
    <script src="js/jquery/jquery.js"  type="text/javascript"></script> здесь насколько я понимаю я подключаю jquery.

{* Увеличитель картинок *}
 <script type="text/javascript" src="design/{$settings->theme}/js/jquery-1.8.2.min.js"></script> а здесь подклюдчается сам скрипт лупы.

Вот сайт с которого я взял скрипт пример 3 http://zoomsl.tw1.ru/example/

В product.tpl засунул код:

<script>
jQuery(function(){

$(".my-foto").imagezoomsl({
    
zoomrange
: [2.12, 12],
magnifiersize: [530, 340],
scrollspeedanimate: 10,
loopspeedanimate: 5,
cursorshadeborder: "10px solid black",
magnifiereffectanimate: "slideIn"                    
});
});
</script>
   в html писал выше. Извиняюсь если мой вопрос тупой но пожалуйста помогите разобраться в чем проблема. Заранее благодарен за любую помощь.

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

Делаю то же самое через http://jquerylist.ru/image-viewer/cloud-zoom.html

В index.tpl прописано:

{* JQuery *}
    <script src="js/jquery/jquery.js"  type="text/javascript"></script>

{* Увеличитель картинок *}
 <script type="text/javascript" src="design/{$settings->theme}/js/cloud-zoom.1.0.2.js"></script>
 <link rel="stylesheet" href="design/{$settings->theme}/css/cloud-zoom.css" type="text/css" media="screen" />

 

в product.tpl прописал:

<!-- Большое фото -->
    {if $product->image}
    <div class="image">
        <a class = 'cloud-zoom' id='zoom1' href="{$product->image->filename|resize:800:800:w}"><img src="{$product->image->filename|resize:200:200}" alt="{$product->product->name|escape}" /></a>
    </div>
    {/if}
    <!-- Большое фото (The End)--> прописал все как по инструкции.

Но увеличитель картинок не работает. на странице товара к примеру http://magest.bget.ru/products/adsw. Что я делаю неправильно?

заранее благодарен за любую помощь.

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

Добавил посмотрел исходный код сейчас есть но все равно не работает:

<link rel="stylesheet" href="design/test/css/cloud-zoom.css" type="text/css" media="screen" />
<script type="text/javascript" src="design/test/js/cloud-zoom.1.0.2.js"></script>

 

А в product.tpl , блок отвечающий за вывод фотографии.Но при наведении на него ничего не происходит. В чем может быть проблема. Заранее благодарен за любую помощь. Содержание блока отвечающего за картинку:

<!-- Большое фото -->
    {if $product->image}
    <div class="image">
        <a class = 'cloud-zoom' id='zoom1' href="{$product->image->filename|resize:800:800:w}"><img src="{$product->image->filename|resize:200:200}" alt="{$product->product->name|escape}" /></a>
    </div>
    {/if}
    <!-- Большое фото (The End)-->
 

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

Я пытаюсь установить на страницу product.tpl вот этот скрипт http://jquerylist.ru/image-viewer/cloud-zoom.html Получается, что скрипт я подключил, css добавил в html все добавил как в инструкции. Теперь мне необходим вызов этого скрипта на странице product.tpl. Насколько  я понял то, что я хочу вызвать оборачивается в {literal} и далее вызов самого скрипта.

 

{literal}<script>$(function() {   $(".cloud-zoom(класс функции указанный у фото в html)").(что тут указывается)({какие параметры должны передаваться }); }); </script> {/literal}

Заранее благодарен за любую помощь.

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

А что означает

{literal}{/literal} у меня вопрос что указывается в самом теле функции 
<script>$(function() {   $(".cloud-zoom(класс функции указанный у фото в html)").(что тут указывается?)({какие параметры должны передаваться?}); }); </script> 

ставлю скрипт с сайта: http://jquerylist.ru...cloud-zoom.html

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

А Вы это читали? Делали?

 

Картинки для увеличения должны быть заключены в ссылки с классом 'cloud-zoom'.
Значение href ссылки должно указывать на большое изображение.
Настройки могут быть заданы в атрибуте rel у ссылки.
Опции должны быть записаны в формате объекта JavaScript,
но без использования фигурных скобок.

 

И вообще по Вашей ссылке  я никакого скрипта для увеличения не вижу. Увеличивается так:

<a href='/images/zoomengine/bigimage00.jpg' class = 'cloud-zoom' id='zoom1'
rel="adjustX: 10, adjustY:-4">
<img src="/images/zoomengine/smallimage.jpg" alt='' title="Optional title display" />
</a>
Ссылка на сообщение
Поделиться на другие сайты

Вот пример страницы с Вашим зумом:

<!DOCTYPE html>
<html>

    <head>
        <title>Cloud Zoom</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <!-- Include jQuery. -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

        <!-- Include Cloud Zoom CSS. -->
        <link rel="stylesheet" type="text/css" href="cloudzoom.css" />

        <!-- Include Cloud Zoom script. -->
        <script type="text/javascript" src="cloudzoom.js"></script>

        <!-- Call quick start function. -->
        <script type="text/javascript">
            CloudZoom.quickStart();
        </script>    
    </head>
    
    <body>
        <!-- Setup the zoomImage property to point to the big image. -->
        <img class = "cloudzoom" src = "images/small/image1.jpg"
             data-cloudzoom = "zoomImage: 'images/large/image1.jpg'" />
    </body>

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

У меня такой вопрос: какой бы jquery скрипт я не вставлял в tpl с помощью {literal}, выдаёт постоянно ошибку "$ is not defined". Скрипты на чистом js проходят. 
Уже обновлял файл jQuery с 3.1.0 до 3.3.1, не помогло

Что это может быть?

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

У меня такой вопрос: какой бы jquery скрипт я не вставлял в tpl с помощью {literal}, выдаёт постоянно ошибку "$ is not defined". Скрипты на чистом js проходят.

Уже обновлял файл jQuery с 3.1.0 до 3.3.1, не помогло

 

Что это может быть?

Вам что в лоб что по лбу, ну никак не доходит!

Дайте ссылку на сайт (как минимум), и возможно вам помогут решить вопрос.

Толку от гадания ну никакого.

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

Вам что в лоб что по лбу, ну никак не доходит!

Дайте ссылку на сайт (как минимум), и возможно вам помогут решить вопрос.

Толку от гадания ну никакого.

http://www.papashlavash.com

 

скрипт находится на странице корзины

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

http://www.papashlavash.com

 

скрипт находится на странице корзины

В упор не вижу чтобы у вас был подключен jQuery хоть бы где.
Ссылка на сообщение
Поделиться на другие сайты

В упор не вижу чтобы у вас был подключен jQuery хоть бы где.

Подключено у него "хоть бы где".

Но, видимо, подключено не так просто и прямолинейно, как Вы привыкли...

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

Подключено у него "хоть бы где".

Но, видимо, подключено не так просто и прямолинейно, как Вы привыкли...

Так нет, есть только https://github.com/requirejs/requirejs
Ссылка на сообщение
Поделиться на другие сайты

Так нет, есть только https://github.com/requirejs/requirejs

 

Не знаю, что означает туманное "Так нет", но в браузерном инспекторе можно легко увидеть все подключаемое...

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

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

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

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

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

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

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

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

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

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