|
Как прикрутить галерею iload на форум и модули, $IMAGE1$
|
|
| [1] likbezz [26.04.2012, 01:52] |
Спрашивает Оленька2116:
Quote (Оленька2116) скажите как же сделать так как на этом сайте ... картинки загруженные в новости выходят в модальном окне iLoad Это реально важный вопрос! Что такое скрипт http://studioad.ru/iload/iLoad.js я знаю!!! Мне нужен код как прикрутить его к загружаемым фоткам в новостях. |
|
| [2] likbezz [26.04.2012, 01:55] |
Вообще, библиотека сама может икать и обрабатывать ссылки помеченные соответствующим образом.
Делается это при помощи атрибута «rel».
Так что, если вы добавляете изображения через шаблон, и нужно что бы они открывались в iLoad делаем вот так:
Это в шаблонах «Вид материала» и «Материал и комментарии к нему»:
Code <?if($IMG_URL1$)?> <a rel="iLoad" href="$IMG_URL1$" title="$TITLE$"><img src="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>" style="width:100px;height:auto;border:0;" alt="Картинка к материалу: «$TITLE$»" /></a> <?endif?>
- Таких блоков может быть несколько.
По теме: Как вывести все картинки из прикрепления? (Вывести картинки из прикрепления на форуме, и в пр. модулях.)
И так, если вы юзаете картинки через шаблон, то вам все должно быть понятно.
....
А как же прикрутить обработчик iLoad к картинкам что вставляются оператором $IMАGE1$ ?
Тоже не очень сложно.
Инструкция.
Качаем библиотеку, и подключаем её, либо ко всему сайту, либо только к тем шаблонам, де должна работать.
Подключается она, в самый низ.
Если ко всему сайту - то добавляем ссылку на скрипт в любой глобальный блок, что отображается на сайте, например в нижний.
Code <script type="text/javascript" src="http://likbezz.ru/_source/_js/iload/iLoad.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div.eMessage a[title^='Нажмите'],td.eText a[title^='Нажмите'],td.posttdMessage a[title^='Нажмите']").click(function(){
L([this.href],this.title);return false;
});
});
</script>
Где:
Code $("div.eMessage a[title^='Нажмите'],td.eText a[title^='Нажмите'],td.posttdMessage a[title^='Нажмите']")
Если у вас НЕ стандартный шаблон, данный скрипт обработчика может не работать.
В таком случае, смотрите какой класс отвечает за блок в котором текст и и картинка и корректируете скрипт обработчика.
Данный обработчик работает с форумом, новостями и каталогами.
...
Пример работы данного скрипта можно посмотреть на сайте разработчика: studioad.ru или в ниже представленных примерах.
☑ Пример №1 - через шаблон.
☑ Пример №2 - обрабатываются картинки с title начинаюшимся со слова «Нажмите»
...
По теме:
Последняя (на данный момент) версия iLoad v3.3.5
Подробнее о API галереи iload |
|
| [3] RazieL [04.05.2012, 11:38] |
likbezz, сам пользуюсь этой галереей, очень нравится, работает быстро и легко подключается...
Только вот у меня вопрос. Я при подключении прописывал только
Code <script type="text/javascript" src=".../iload/iLoad.js"></script>
Для чего служит остальная часть?
Code <script type="text/javascript">
$(document).ready(function(){
$("div.eMessage a[title^='Нажмите'],td.eText a[title^='Нажмите'],td.posttdMessage a[title^='Нажмите']").click(function(){
L([this.href],this.title);return false;
});
});
</script> |
|
| [4] likbezz [04.05.2012, 11:56] |
RazieL, Quote (RazieL) Для чего служит остальная часть?
Находить все ссылки с картинками - с титле начинающимся на «Нажмите» и вешает обработчик, для того что бы открывались в галерее.
... |
|
| [5] RazieL [04.05.2012, 12:20] |
|
likbezz, да, но у меня ведь и без него работает) |
|
| [6] likbezz [04.05.2012, 15:00] |
RazieL, Quote (RazieL) да, но у меня ведь и без него работает)
Значит тебя прописан к ссылкам rel="iLoad"
Code <a rel="iLoad" href="$IMG_URL1$" title="$TITLE$"> картинка </a>
или в самой библиотеке уже есть скрипт обработчик.
... |
|
| [7] fart [12.05.2012, 23:23] |
|
а как сделать обработчик чтобы он открывал группу изображений, ну т.е чтобы все изображения в материала он объединил в 1 группу и их можно было пролистывать! |
|
| [8] likbezz [13.05.2012, 02:21] |
fart, Quote (fart) а как сделать обработчик чтобы он открывал группу изображений, ну т.е чтобы все изображения в материала он объединил в 1 группу и их можно было пролистывать!
Повесить скрипт на блок текста с картинками, который искал бы ссылки на картинки, и добавлял бы соответствующий атрибут.
Типа:
Code <script type="text/javascript">
$(document).ready(function(){
$("div.eMessage a[title^='Нажмите'],td.eText a[title^='Нажмите'],td.posttdMessage a[title^='Нажмите']").attr('rel','iLoad|Название сета');
L.create();
});
</script>
...
☑ Пример №2_Group - обрабатываются картинки с title начинаюшимся со слова «Нажмите» и добавляет атрибут rel с названием сета.
... |
|
| [9] fart [13.05.2012, 12:20] |
|
likbezz, Спасибо! |
|
| [10] QQQ [17.05.2012, 10:06] |
Здравствуйте likbezz! У меня такая проблема: установил на свой сайт (ucoz) данный скрипт, и всё вроде работает но, открывается
сразу 2 изображения.в чём может быть проблема?
P.S.
Если нужно дам ссылку на сайт.Заранее спасибо!
Сообщение отредактировал QQQ - Четверг, 17.05.2012, 10:12 |
|
| [11] likbezz [17.05.2012, 10:19] |
QQQ, Quote (QQQ) У меня такая проблема: установил на свой сайт (ucoz) данный скрипт, и всё вроде работает но, открывается
сразу 2 изображения.в чём может быть проблема?
Добрый.
Прописан два раза.
Или прописан и атрибут rel и открытие по клику - нужно что-то одно.
Quote (QQQ) Если нужно дам ссылку на сайт
Конечно нужно. |
|
| [12] QQQ [17.05.2012, 12:07] |
Спасибо за быстрый ответ!
Вот сайт: клик!
Вот код скрипта:
<center>
<?if($IMG_URL2$)?><a rel="iLoad" href="$IMG_URL2$" title="$TITLE$"><img src="<?if($IMG_SMALL_URL2$)?>$IMG_SMALL_URL2$<?else?>$IMG_URL2$<?endif?>" style="width:100px;height:75px;border:0;" alt="Картинка к материалу: «$TITLE$»" /></a>
<?endif?>
<?if($IMG_URL3$)?><a rel="iLoad" href="$IMG_URL3$" title="$TITLE$"><img src="<?if($IMG_SMALL_URL3$)?>$IMG_SMALL_URL3$<?else?>$IMG_URL3$<?endif?>" style="width:100px;height:75px;border:0;" alt="Картинка к материалу: «$TITLE$»" /></a>
<?endif?>
<?if($IMG_URL4$)?><a rel="iLoad" href="$IMG_URL4$" title="$TITLE$"><img src="<?if($IMG_SMALL_URL4$)?>$IMG_SMALL_URL4$<?else?>$IMG_URL4$<?endif?>" style="width:100px;height:75px;border:0;" alt="Картинка к материалу: «$TITLE$»" /></a>
<?endif?>
<?if($IMG_URL5$)?><a rel="iLoad" href="$IMG_URL5$" title="$TITLE$"><img src="<?if($IMG_SMALL_URL5$)?>$IMG_SMALL_URL5$<?else?>$IMG_URL5$<?endif?>" style="width:100px;height:75px;border:0;" alt="Картинка к материалу: «$TITLE$»" /></a>
<?endif?></center>
Quote (likbezz) Прописан два раза.
Или прописан и атрибут rel и открытие по клику - нужно что-то одно.
А где это можно посмотреть?Добавлено (17.05.2012, 12:07)
---------------------------------------------
Quote (QQQ) Спасибо за быстрый ответ! Вот сайт: клик! Вот код скрипта: <center> <?if($IMG_URL2$)?><a rel="iLoad" href="$IMG_URL2$" title="$TITLE$"><img src="<?if($IMG_SMALL_URL2$)?>$IMG_SMALL_URL2$<?else?>$IMG_URL2$<?endif?>" style="width:100px;height:75px;border:0;" alt="Картинка к материалу: «$TITLE$»" /></a> <?endif?> <?if($IMG_URL3$)?><a rel="iLoad" href="$IMG_URL3$" title="$TITLE$"><img src="<?if($IMG_SMALL_URL3$)?>$IMG_SMALL_URL3$<?else?>$IMG_URL3$<?endif?>" style="width:100px;height:75px;border:0;" alt="Картинка к материалу: «$TITLE$»" /></a> <?endif?> <?if($IMG_URL4$)?><a rel="iLoad" href="$IMG_URL4$" title="$TITLE$"><img src="<?if($IMG_SMALL_URL4$)?>$IMG_SMALL_URL4$<?else?>$IMG_URL4$<?endif?>" style="width:100px;height:75px;border:0;" alt="Картинка к материалу: «$TITLE$»" /></a> <?endif?> <?if($IMG_URL5$)?><a rel="iLoad" href="$IMG_URL5$" title="$TITLE$"><img src="<?if($IMG_SMALL_URL5$)?>$IMG_SMALL_URL5$<?else?>$IMG_URL5$<?endif?>" style="width:100px;height:75px;border:0;" alt="Картинка к материалу: «$TITLE$»" /></a> <?endif?></center> Quote (likbezz) Прописан два раза. Или прописан и атрибут rel и открытие по клику - нужно что-то одно. А где это можно посмотреть?
Странно но, я сам нашёл ответ  - просто переложил файлы из корня сайта в созданную папку "iload" и всё заработало! 
Спасибо за помощь и за скрипт!
Сообщение отредактировал QQQ - Четверг, 17.05.2012, 10:47 |
|
| [13] likbezz [17.05.2012, 12:47] |
QQQ, Quote (QQQ) Странно но, я сам нашёл ответ - просто переложил файлы из корня сайта в созданную папку "iload" и всё заработало!
И тем не менее, поправь.
У тебя скрипт прописан два раза. Один раз вот здесь:
Code <script type='text/javascript' src='/iload/iLoad.js'></script><!--/U1MENU1Z-->
- В глоб блоке MENU
А второй раз в самом низу страницы:
Code <script type='text/javascript' src='/iLoad/iLoad.js'></script>
</body>
- Убери один из них.
... |
|
| [14] QQQ [17.05.2012, 13:17] |
Всё исправил!=)
У меня ещё один вопрос: я решил сделать так:
Code <center> <a href='$IMG_URL2$' rel='iLoad|Изображение к материалу' title='Нажмите левую кнопку мыши на изображении и не отпуская кнопку переместите мышку.'><img src='$IMG_SMALL_URL2$'/></a> <a href='$IMG_URL3$' rel='iLoad|Изображение к материалу' title='Нажмите левую кнопку мыши на изображении и не отпуская кнопку переместите мышку.'><img src='$IMG_SMALL_URL3$'/></a> <a href='$IMG_URL4$' rel='iLoad|Изображение к материалу' title='Нажмите левую кнопку мыши на изображении и не отпуская кнопку переместите мышку.'><img src='$IMG_SMALL_URL4$'/></a> <a href='$IMG_URL5$' rel='iLoad|Изображение к материалу' title='Нажмите левую кнопку мыши на изображении и не отпуская кнопку переместите мышку.'><img src='$IMG_SMALL_URL5$'/></a> </center>
как сделать чтоб предпросмотр (т.е. уменьшенные изображения) были 100px на 100px?
Сообщение отредактировал QQQ - Четверг, 17.05.2012, 13:31 |
|
| [15] likbezz [17.05.2012, 13:48] |
QQQ, Quote (QQQ) как сделать чтоб предпросмотр (т.е. уменьшенные изображения) были 100px на 100px?
Прописать им размер )
Типа:
Code <img src="$IMG_SMALL_URL4$" style="width:100px;height:100px;" alt=""/> |
|
