Случайный вывод зависимых элементов

[3aiac]

Здравствуйте! Мне очень нужен скрипт случайного вывода элементов. Как на сайте nocover.ru Там выводится случайный текст из книги и внизу на кнопке название этой книги. Мне нужен такой же скрипт, но чтобы на странице выводилось изображение с фиксированной шириной, а на кнопке ссылка на это изображение, чтобы скачать. Вывод изображений хочу сделать из папки. И желательно чтобы изображения не повторялись, пока не покажутся все разные.

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

Долго уже ищу, никак не могу найти нужное(

[Admin]

Здравствуйте!
Уже что-то подобное делали, так что пришлось совсем немного "допилить" скрипт. Если я правильно понял поставленную задачу, то вот Вам готовый код:

Код:

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

<div align="center">
<a href="images/start.jpg" id="slide_show_link">Скачать</a><br>
<img src="images/start.jpg" width="200" alt="" id="slide_show">
</div>

<script type="text/javascript">
<?php
$images = array();
$folder = 'image/';
$array_to_js='var imgs=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) {
    $array_to_js.='"'.$folder.$all_files[$i].'",';
}
echo substr($array_to_js,0,-1).'];';
?>
imgs = imgs.sort(function() { return Math.random() - 0.6;});
var n=0;
var time=800;

function chgImg() {
$('#slide_show').fadeOut(time, function() {
    $('#slide_show_link').attr('href', imgs[n]);
    $(this).attr('src', imgs[n]).fadeIn(time);
});

n++;
if (n>=imgs.length) n=0;
}

$(document).ready(function(){
    play=setInterval("chgImg()", 2500);
});
</script>

Местоположение изображения и ссылки можно изменить на Ваш вкус.

[3aiac]

Залил все это на страницу.. Тут слайдер по таймеру или по клику? Потому что ничего кроме изображения и ссылки не отображается на странице, и смена картинки тоже не происходит(

[Admin]

Слайдер работает по таймеру. Смена картинок каждые 2,5 сек (можно менять).

В строчке $folder = 'image/'; нужно указать путь к папке с изображениями относительно главной странички.

Можно попробовать открыть в IE, он хоть напишет какая строчка ему не нравится.

[3aiac]

А какие имена изображений должны быть? По какому шаблону? А можно не по таймеру, а по клику сделать? Мне по клику очень нужно.

[Admin]

А у Вас PHP код обрабатывается сервером?
Имена любые (правда русские буквы не проверял), т.к. PHP считывает все имена файлов из папки и помещает их в массив. Далее работает JavaScript код.
По клику можно, но уже не сегодня...

[3aiac]

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

Хорошо, буду ждать!

Ааа там вообще все файлы из папки берет, и изображения и php и js... Нужно фильтр на изображения. Буду ждать.

[Admin]

Зачем мучиться с фильтрами. Не легче ли перенести все изображения в одну папку и указать ее в скрипте.

Сделал смену изображения при клике по тексту "Предыдущая" или "Следующая". Вместо них может быть абсолютно любой элемент (изображение, текст, блок DIV и т.д.), главное id оставить.

Код:

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

<div align="center">
<span id="prev_img">Предыдущая</span>&nbsp;
<a href="image/start.jpg" id="slide_show_link">Скачать</a>&nbsp;
<span id="nexn_img">Следующая</span><br>
<img src="image/start.jpg" width="200" alt="" id="slide_show">
</div>

<script type="text/javascript">
<?php
$images = array();
$folder = 'image/';
$array_to_js='var imgs=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) {
    $array_to_js.='"'.$folder.$all_files[$i].'",';
}
echo substr($array_to_js,0,-1).'];';
?>
imgs = imgs.sort(function() { return Math.random() - 0.6;});
var n=0;
var time=800;

function chgImg(x) {
n+=x;
if (n>=imgs.length) n=0;
if (n<0) n=imgs.length-1;

$('#slide_show').fadeOut(time, function() {
    $('#slide_show_link').attr('href', imgs[n]);
    $(this).attr('src', imgs[n]).fadeIn(time);
});
}

$(document).ready(function(){
    $('#nexn_img').click(function(){ chgImg(1); });
    $('#prev_img').click(function(){ chgImg(-1); });
});
</script>

[3aiac]

(15.10.2014 20:04:59)Admin писал(а):  Зачем мучиться с фильтрами. Не легче ли перенести все изображения в одну папку и указать ее в скрипте.

Сделал смену изображения при клике по тексту "Предыдущая" или "Следующая". Вместо них может быть абсолютно любой элемент (изображение, текст, блок DIV и т.д.), главное id оставить.

Код:

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

<div align="center">
<span id="prev_img">Предыдущая</span>&nbsp;
<a href="image/start.jpg" id="slide_show_link">Скачать</a>&nbsp;
<span id="nexn_img">Следующая</span><br>
<img src="image/start.jpg" width="200" alt="" id="slide_show">
</div>

<script type="text/javascript">
<?php
$images = array();
$folder = 'image/';
$array_to_js='var imgs=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) {
    $array_to_js.='"'.$folder.$all_files[$i].'",';
}
echo substr($array_to_js,0,-1).'];';
?>
imgs = imgs.sort(function() { return Math.random() - 0.6;});
var n=0;
var time=800;

function chgImg(x) {
n+=x;
if (n>=imgs.length) n=0;
if (n<0) n=imgs.length-1;

$('#slide_show').fadeOut(time, function() {
    $('#slide_show_link').attr('href', imgs[n]);
    $(this).attr('src', imgs[n]).fadeIn(time);
});
}

$(document).ready(function(){
    $('#nexn_img').click(function(){ chgImg(1); });
    $('#prev_img').click(function(){ chgImg(-1); });
});
</script>

ОТЛИЧНО!!! Работает! Класс! А можете еще подписать функции? Чтобы я разобрался сам в этом. Особо интересует тип смены изображения. Его же можно поменять, как я понимаю?) Если не трудно, распишите пожалуйста) Очень благодарен за скрипт!

[Admin]

А что тут подписывать? fadeOut - скрывает изображение, fadeIn - показывает, attr - заменяет путь к изображению.
Тут главное синтаксис понять, а функций в jQuery не так уж и много.

К сожалению, в стандартном наборе jQuery только пару функций по смене изображений (изменение размера или прозрачности), так что для красивой смены изображений надо искать какой-нибудь плагин.