allon925 Опубликовано 7 мая, 2013 Жалоба Поделиться Опубликовано 7 мая, 2013 Сайт: 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 при наведении на картинку увеличенного изображения нет. В чем может быть проблема? заранее благодарен за любую помощь. Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 7 мая, 2013 Жалоба Поделиться Опубликовано 7 мая, 2013 Во-первых, jquery у вас 2 раза подключен... Цитата Ссылка на сообщение Поделиться на другие сайты
allon925 Опубликовано 7 мая, 2013 Автор Жалоба Поделиться Опубликовано 7 мая, 2013 Может я чего-то не понимаю но где второй раз. Я нашел только один раз в index.tpl{* JQuery *} <script src="js/jquery/jquery.js" type="text/javascript"></script>А почему не срабатывает увеличение на шаблоне product.tpl на странице http://magest.bget.ru/products/adsw ? Цитата Ссылка на сообщение Поделиться на другие сайты
Kosjak76 Опубликовано 7 мая, 2013 Жалоба Поделиться Опубликовано 7 мая, 2013 Блин, вы вообще в курсе, о чем говорите?? <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> Цитата Ссылка на сообщение Поделиться на другие сайты
Kpoxa Опубликовано 7 мая, 2013 Жалоба Поделиться Опубликовано 7 мая, 2013 Человек видимо ошибся, вместо cloudzoom.js подключил jquery-1.8.2.min.js Цитата Ссылка на сообщение Поделиться на другие сайты
allon925 Опубликовано 7 мая, 2013 Автор Жалоба Поделиться Опубликовано 7 мая, 2013 Я извиняюсь за то, что я не понимаю простых вещей, вот мой файл 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 писал выше. Извиняюсь если мой вопрос тупой но пожалуйста помогите разобраться в чем проблема. Заранее благодарен за любую помощь. Цитата Ссылка на сообщение Поделиться на другие сайты
allon925 Опубликовано 7 мая, 2013 Автор Жалоба Поделиться Опубликовано 7 мая, 2013 Делаю то же самое через 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. Что я делаю неправильно?заранее благодарен за любую помощь. Цитата Ссылка на сообщение Поделиться на другие сайты
allon925 Опубликовано 7 мая, 2013 Автор Жалоба Поделиться Опубликовано 7 мая, 2013 Добавил посмотрел исходный код сейчас есть но все равно не работает:<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)--> Цитата Ссылка на сообщение Поделиться на другие сайты
Kpoxa Опубликовано 8 мая, 2013 Жалоба Поделиться Опубликовано 8 мая, 2013 Скрипт то подключили, а что ему делать? Нужно указать, что делать пр наведении на картинку. Цитата Ссылка на сообщение Поделиться на другие сайты
allon925 Опубликовано 8 мая, 2013 Автор Жалоба Поделиться Опубликовано 8 мая, 2013 Я пытаюсь установить на страницу product.tpl вот этот скрипт http://jquerylist.ru/image-viewer/cloud-zoom.html Получается, что скрипт я подключил, css добавил в html все добавил как в инструкции. Теперь мне необходим вызов этого скрипта на странице product.tpl. Насколько я понял то, что я хочу вызвать оборачивается в {literal} и далее вызов самого скрипта. {literal}<script>$(function() { $(".cloud-zoom(класс функции указанный у фото в html)").(что тут указывается)({какие параметры должны передаваться }); }); </script> {/literal}Заранее благодарен за любую помощь. Цитата Ссылка на сообщение Поделиться на другие сайты
Kpoxa Опубликовано 8 мая, 2013 Жалоба Поделиться Опубликовано 8 мая, 2013 вставьте инициализацию после подключения скрипта в head без literal Цитата Ссылка на сообщение Поделиться на другие сайты
allon925 Опубликовано 8 мая, 2013 Автор Жалоба Поделиться Опубликовано 8 мая, 2013 А что означает{literal}{/literal} у меня вопрос что указывается в самом теле функции <script>$(function() { $(".cloud-zoom(класс функции указанный у фото в html)").(что тут указывается?)({какие параметры должны передаваться?}); }); </script> ставлю скрипт с сайта: http://jquerylist.ru...cloud-zoom.html Цитата Ссылка на сообщение Поделиться на другие сайты
Kpoxa Опубликовано 8 мая, 2013 Жалоба Поделиться Опубликовано 8 мая, 2013 {literal}{/literal} обрамление скрипта в теле страницы Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 8 мая, 2013 Жалоба Поделиться Опубликовано 8 мая, 2013 А Вы это читали? Делали? Картинки для увеличения должны быть заключены в ссылки с классом '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> Цитата Ссылка на сообщение Поделиться на другие сайты
koteyka Опубликовано 8 мая, 2013 Жалоба Поделиться Опубликовано 8 мая, 2013 Вот пример страницы с Вашим зумом: <!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> Цитата Ссылка на сообщение Поделиться на другие сайты
WIXVW Опубликовано 19 февраля, 2019 Жалоба Поделиться Опубликовано 19 февраля, 2019 У меня такой вопрос: какой бы jquery скрипт я не вставлял в tpl с помощью {literal}, выдаёт постоянно ошибку "$ is not defined". Скрипты на чистом js проходят. Уже обновлял файл jQuery с 3.1.0 до 3.3.1, не помоглоЧто это может быть? Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 19 февраля, 2019 Жалоба Поделиться Опубликовано 19 февраля, 2019 У меня такой вопрос: какой бы jquery скрипт я не вставлял в tpl с помощью {literal}, выдаёт постоянно ошибку "$ is not defined". Скрипты на чистом js проходят. Уже обновлял файл jQuery с 3.1.0 до 3.3.1, не помогло Что это может быть?Вам что в лоб что по лбу, ну никак не доходит!Дайте ссылку на сайт (как минимум), и возможно вам помогут решить вопрос.Толку от гадания ну никакого. Цитата Ссылка на сообщение Поделиться на другие сайты
WIXVW Опубликовано 20 февраля, 2019 Жалоба Поделиться Опубликовано 20 февраля, 2019 Вам что в лоб что по лбу, ну никак не доходит!Дайте ссылку на сайт (как минимум), и возможно вам помогут решить вопрос.Толку от гадания ну никакого.http://www.papashlavash.com скрипт находится на странице корзины Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 20 февраля, 2019 Жалоба Поделиться Опубликовано 20 февраля, 2019 http://www.papashlavash.com скрипт находится на странице корзиныВ упор не вижу чтобы у вас был подключен jQuery хоть бы где. Цитата Ссылка на сообщение Поделиться на другие сайты
phukortsin Опубликовано 20 февраля, 2019 Жалоба Поделиться Опубликовано 20 февраля, 2019 В упор не вижу чтобы у вас был подключен jQuery хоть бы где.Подключено у него "хоть бы где". Но, видимо, подключено не так просто и прямолинейно, как Вы привыкли... Цитата Ссылка на сообщение Поделиться на другие сайты
Noxter Опубликовано 20 февраля, 2019 Жалоба Поделиться Опубликовано 20 февраля, 2019 Подключено у него "хоть бы где". Но, видимо, подключено не так просто и прямолинейно, как Вы привыкли...Так нет, есть только https://github.com/requirejs/requirejs Цитата Ссылка на сообщение Поделиться на другие сайты
phukortsin Опубликовано 20 февраля, 2019 Жалоба Поделиться Опубликовано 20 февраля, 2019 Так нет, есть только https://github.com/requirejs/requirejs Не знаю, что означает туманное "Так нет", но в браузерном инспекторе можно легко увидеть все подключаемое... Цитата Ссылка на сообщение Поделиться на другие сайты
WIXVW Опубликовано 20 февраля, 2019 Жалоба Поделиться Опубликовано 20 февраля, 2019 Так нет, есть только https://github.com/requirejs/requirejsподключен через config.js Цитата Ссылка на сообщение Поделиться на другие сайты
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.