Модификация скрипта плавной смены изображений на jQuery

[Admin]

Без регистрации посмотреть ничего не удалось, регистрироваться не стал.

Вот простой код для смены изображений:

Код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<img src="image/img_1.png" alt="" id="slide_show">

<script type="text/javascript">
var imgs = ["image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png"];
var n = 0;
$(document).ready(function(){ play = setInterval("chgImg(0)", 2000); });

function chgImg() {
$('#slide_show').fadeOut(800, function() {$(this).attr('src', imgs[n]).fadeIn(800);});
n++;
if (n>=imgs.length) n = 0;
}
</script>

Вам остается добавить id="slide_show" к изображению подарка на аватарке, и при помощи PHP прописать в переменной var imgs все пути изображений других подарков.

[sergei5053]

(03.04.2014 21:25:21)Admin писал(а):  Без регистрации посмотреть ничего не удалось, регистрироваться не стал.

Вот простой код для смены изображений:

Код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<img src="image/img_1.png" alt="" id="slide_show">

<script type="text/javascript">
var imgs = ["image/img_1.png","image/img_2.png","image/img_3.png","image/img_4.png"];
var n = 0;
$(document).ready(function(){ play = setInterval("chgImg(0)", 2000); });

function chgImg() {
$('#slide_show').fadeOut(800, function() {$(this).attr('src', imgs[n]).fadeIn(800);});
n++;
if (n>=imgs.length) n = 0;
}
</script>

Вам остается добавить id="slide_show" к изображению подарка на аватарке, и при помощи PHP прописать в переменной var imgs все пути изображений других подарков.

id="slide_show" к изображению подарка на аватарке.
К каждому?

[Admin]

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

[Swisss]

Здравствуйте.

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

[Admin]

Если я правильно Вас понял, то должно получиться что-то вроде этого:

Код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
var imgs = ['image/img_1.png','image/img_2.png','image/img_3.png','image/img_4.png'];
var links = ['news.php','script.php','useful_site.php','trick.php'];
var text = ['Произвольный текст','Другой текст','Просто текст','Как то так'];
var n = 0;
time = 800;
play = setInterval("chgImg()", 3000);

function chgImg() {
n += 1;
if (n > imgs.length - 1) n = 0;
$('#slide_show, #slide_show_text').fadeOut(time, function() {
$('#slide_show_links').attr('href', links[n]);
$('#slide_show_text').html(text[n]);
$('#slide_show, #slide_show_text').attr('src', imgs[n]).fadeIn(time);
});
}
</script>

<a href="news.php" id="slide_show_links"><img src="image/img_1.png" alt="" id="slide_show"></a>
<div id="slide_show_text">Произвольный текст</div>

Если что-то не так, то опишите подробнее, что Вам надо.

[Swisss]

(14.09.2014 22:02:08)Admin писал(а):  Если я правильно Вас понял, то должно получиться что-то вроде этого:

Код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
var imgs = ['image/img_1.png','image/img_2.png','image/img_3.png','image/img_4.png'];
var links = ['news.php','script.php','useful_site.php','trick.php'];
var text = ['Произвольный текст','Другой текст','Просто текст','Как то так'];
var n = 0;
time = 800;
play = setInterval("chgImg()", 3000);

function chgImg() {
n += 1;
if (n > imgs.length - 1) n = 0;
$('#slide_show, #slide_show_text').fadeOut(time, function() {
$('#slide_show_links').attr('href', links[n]);
$('#slide_show_text').html(text[n]);
$('#slide_show, #slide_show_text').attr('src', imgs[n]).fadeIn(time);
});
}
</script>

<a href="news.php" id="slide_show_links"><img src="image/img_1.png" alt="" id="slide_show"></a>
<div id="slide_show_text">Произвольный текст</div>

Если что-то не так, то опишите подробнее, что Вам надо.

Да, Вы все верно поняли. Единственный вопрос если вдруг мне приспичит добавить еще одну строку текста, то я соответственно создаю массив с именем скажем text_2, описываю текст и добавляю соответствующий id slide_show_text2 в сам скрипт и html-часть кода?

Спасибо.

[Admin]

Еще в скрипте надо будет добавить строчку $('#slide_show_text2').html(text_2[n]); для смены текста.

При желании можно сделать все без изменений кода (если строки идут подряд). Для этого пропишите все, что Вам надо в переменной text прямо с HTML тегами:

Код:

var text = ['<p>Произвольный текст</p><p>Произвольный текст 222</p>',
    '<p>Другой текст</p><p>Другой текст 333333333</p>',
    '<p>Просто текст</p><br><br>Теги, теги',
    'Как то так'];

[Swisss]

Вдогонку к предыдущему комментарию: посмотрел код внимательно и оказалось Вы не совсем правильно поняли. Я хотел прикрутить ссылки на картинках и текст к двум (трем, четырем, пяти и т.д.) слайд-шоу. Т.е. у меня на странице три блока:
- в первом отображаются только картинки со ссылками.
- во втором и третьем картинки со ссылками и текст под/над ними.
Получается, что мы имеем три независимых скрипта. Соответственно хочу спросить как правильно это дело запилить =)

Спасибо.

[Admin]

(16.09.2014 14:38:30)Swisss писал(а):  Т.е. у меня на странице 3 блока:
- в первом отображаются только картинки со ссылками.
- во втором и третьем картинки со ссылками и текст под/над ними.
Получается, что мы имеем три независимых скрипта. Соответственно хочу спросить как правильно это дело запилить =)

Как-то так:

Код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
var imgs = ['image/img_1.png','image/img_2.png','image/img_3.png','image/img_4.png'];
var links = ['news.php','script.php','useful_site.php','trick.php'];

var imgs_2 = ['image/img_2.png','image/img_3.png','image/img_4.png','image/img_1.png'];
var links_2 = ['script.php','useful_site.php','trick.php','news.php'];
var text_2 = ['Произвольный текст','Другой текст','Просто текст','Как то так'];

var imgs_3 = ['image/img_3.png','image/img_4.png','image/img_1.png','image/img_2.png'];
var links_3 = ['useful_site.php','trick.php','news.php','script.php'];
var text_3 = ['Другой текст','Просто текст','Как то так','Произвольный текст'];

var n = 0;
time = 800;
play = setInterval("chgImg()", 3000);

function chgImg() {
n += 1;
if (n > imgs.length - 1) n = 0;
$('#slide_show, #slide_show_2, #slide_show_3, #slide_show_text_2, #slide_show_text_3').fadeOut(time, function() {

$('#slide_show_links').attr('href', links[n]);
$('#slide_show').attr('src', imgs[n]);

$('#slide_show_links_2').attr('href', links_2[n]);
$('#slide_show_text_2').html(text_2[n]);
$('#slide_show_2').attr('src', imgs_2[n]);

$('#slide_show_links_3').attr('href', links_3[n]);
$('#slide_show_text_3').html(text_3[n]);
$('#slide_show_3').attr('src', imgs_3[n]);

$('#slide_show, #slide_show_2, #slide_show_3, #slide_show_text_2, #slide_show_text_3').fadeIn(time);
});
}
</script>

<a href="news.php" id="slide_show_links"><img src="image/img_1.png" alt="" id="slide_show"></a>
<br><br>

<a href="script.php" id="slide_show_links_2"><img src="image/img_2.png" alt="" id="slide_show_2"></a>
<div id="slide_show_text_2">Произвольный текст</div>
<br><br>

<div id="slide_show_text_3">Другой текст</div>
<a href="useful_site.php" id="slide_show_links_3"><img src="image/img_3.png" alt="" id="slide_show_3"></a>
<br><br>

[Swisss]

Спасибо, сейчас принцип понятен. Теперь попробую прикрутить на страничку и самостоятельно прописать еще один блок. =)