Помощь админам бесплатных форумов на PHPBB3
http://admins.bestforums.org/

Автосмена изображений с эффектами переходов
http://admins.bestforums.org/viewtopic.php?f=3&t=56
Страница 1 из 6

Автор:  admin [ 05 сен 2012, 10:32 ]
Заголовок сообщения:  Автосмена изображений с эффектами переходов

Открываем шаблон overall_header.html
и ниже тега <head>
вставляем данный скрипт
Код:
<script type="text/javascript" src="ССЫЛКА НА СКРИПТ.jQuery 1.2.6.js"></script>
<script type="text/javascript" src="ССЫЛКА НА СКРИПТ.Cycle.js"></script>
<script type="text/javascript">
$.fn.cycle.defaults.timeout = 7000;
$(function() {
$('td pre code').each(function() {
eval($(this).text());
});
});
</script>


строка $.fn.cycle.defaults.timeout = 7000; - это время ожидания смены картинки. Чем больше цифра, тем дольше ждать смену картинки.

вот эти строки
ССЫЛКА НА СКРИПТ.jQuery 1.2.6.js
ССЫЛКА НА СКРИПТ.Cycle.js
заменяем на свои ссылки

Вложение:
Cycle.js




затем вставляем код автосмены изображений, в то место где вы хотите их видеть

Вариант 1.
Код:
<div id="s3">
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="730" height="300" />
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="730" height="300" />
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="730" height="300" />
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="730" height="300" />
</div>
<pre><code class="mix">$('#s3').cycle({fx: 'zoom',
sync:0, delay: -4000 });</code></pre>


Вариант 2.

Код:
<div id="s4">
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="730" height="300" />
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="730" height="300" />
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="730" height="300" />
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="730" height="300" />
</div>
<pre><code class="mix">$('#s4').cycle({fx: 'scrollDown',
sync: 0, delay: -2000});</code></pre>


width="730" height="300"- размер картинки.

строки ССЫЛКА НА ИЗОБРАЖЕНИЕ замените на ссылки ваших картинок

P.S. Колличество картинок можно увеличивать, добавляя в код, такие строки
Код:
<img src="ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="730" height="300" />


В тему стиля, в самый низ, добавляем это
Код:
PRE {
DISPLAY: none
}


пример можно посмотреть тут

Автор:  любовь [ 21 сен 2012, 09:02 ]
Заголовок сообщения:  Re: Автосмена изображений с эффектами переходов

вопрос:
почему вложений Cycle.js [35.98 Кб] 2 раза?

Автор:  admin [ 21 сен 2012, 10:38 ]
Заголовок сообщения:  Re: Автосмена изображений с эффектами переходов

любовь писал(а):вопрос:
почему вложений Cycle.js [35.98 Кб] 2 раза?

уже исправлено

Автор:  mandarin [ 21 сен 2012, 22:42 ]
Заголовок сообщения:  Re: Автосмена изображений с эффектами переходов

объясните блондинко, пожалуйста @}->-- про эти строки. с жава скриптами вообще не дружу. сначала вообще вставила туда ссылку на картинку, но она не меняется, естественно. папка с картинками есть, осталось понять, как из нее сделать файл js

admin писал(а):вот эти строки
ССЫЛКА НА СКРИПТ.jQuery 1.2.6.js
ССЫЛКА НА СКРИПТ.Cycle.js
заменяем на свои ссылки

Автор:  admin [ 21 сен 2012, 23:24 ]
Заголовок сообщения:  Re: Автосмена изображений с эффектами переходов

mandarin писал(а):как из нее сделать файл js
разрешите спросить, из чего вы хотите сделать js?


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


--- вы должны быть зарегистрированным пользователем, чтобы прочитать это содержимое ---

Автор:  mandarin [ 22 сен 2012, 06:28 ]
Заголовок сообщения:  Re: Автосмена изображений с эффектами переходов

админ, я просто так поняла, что на место строк, которые я подчеркнула, нужно вставить какой-то свой скрипт,
вот эти строки
ССЫЛКА НА СКРИПТ.jQuery 1.2.6.js
ССЫЛКА НА СКРИПТ.Cycle.js
заменяем на свои ссылки
оказывается нужно просто скачать Ваши вложения и вставить их.
п.с. что-то все равно у меня не получается. наверное где-то ошиблась.

Автор:  admin [ 22 сен 2012, 10:17 ]
Заголовок сообщения:  Re: Автосмена изображений с эффектами переходов

mandarin писал(а):п.с. что-то все равно у меня не получается. наверное где-то ошиблась.

покажите как вы делали
или в ЛС дайте доступ, и я посмотрю

Автор:  mandarin [ 22 сен 2012, 18:47 ]
Заголовок сообщения:  Re: Автосмена изображений с эффектами переходов

спасибо, напишу данные в личном сообщении.
я уже там столько раз передвигала местами картинки, что какой-то белый фон образовался даже рядом с изображением.

Автор:  admin [ 22 сен 2012, 21:00 ]
Заголовок сообщения:  Re: Автосмена изображений с эффектами переходов

Что то я не могу понять, почему данный скрипт отказывается работать на вашем форуме.
но я хочу спросить, что это вы делали с этим кодом?
то о чём идёт речь я выделил красным.
скажите откуда вы это взяли?
<div id="s3" style="position: relative; width: 400px; height: 300px;">
<img src="http://amigabrasileira.listbb.ru/images/ranks/amigabrasileira_listbb_ru/1.jpg" width="400" height="300" style="position: absolute; top: 150px; left: 365px; display: block; z-index: 4; opacity: 1; width: 0px; height: 0px;">
<img src="http://amigabrasileira.listbb.ru/images/ranks/amigabrasileira_listbb_ru/2.jpg" width="400" height="300" style="position: absolute; top: 150px; left: 365px; display: none; z-index: 5; width: 0px; height: 0px; opacity: 1;">
<img src="http://amigabrasileira.listbb.ru/images/ranks/amigabrasileira_listbb_ru/3.jpg" width="400" height="300" style="position: absolute; top: 150px; left: 365px; display: none; z-index: 5; width: 0px; height: 0px; opacity: 1;">
<img src="http://amigabrasileira.listbb.ru/images/ranks/amigabrasileira_listbb_ru/4.jpg" width="400" height="300" style="position: absolute; top: 150px; left: 365px; display: none; z-index: 5; width: 0px; height: 0px; opacity: 1;">
<img src="http://amigabrasileira.listbb.ru/images/ranks/amigabrasileira_listbb_ru/5.jpg" width="400" height="300" style="position: absolute; top: 150px; left: 365px; display: none; z-index: 5; width: 0px; height: 0px; opacity: 1;">
<img src="http://amigabrasileira.listbb.ru/images/ranks/amigabrasileira_listbb_ru/6.jpg" width="400" height="300" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; width: 730px; height: 300px; opacity: 1; overflow: hidden;">
</div>
<pre>
<code class="mix">$('#s3').cycle({fx: 'zoom',
sync:0, delay: -4000 });</code>
</pre>

Автор:  mandarin [ 22 сен 2012, 21:21 ]
Заголовок сообщения:  Re: Автосмена изображений с эффектами переходов

скопировала у вас на демонстративной странице. я ставила сначала по инструкции, потом решила попробовать ваш код, тут-то вы меня и застукали :-[
теперь на главной странице в шапке картинки удвоились и шапка растянулась вниз.
странно, что у меня не получается установить. :dntknw:

Страница 1 из 6 Часовой пояс: UTC + 1 час [ Летнее время ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/