скрипт галереи
привет. в общем есть у меня желание сделать галерею, на подобии z0r.de , но совсем другой тематики... и по другому работающую. вообще, не знаю, чем они будут похожи. разве что тем, что и там, и там отображается по одному изображению (у меня, а у них флешке). Но я хочу добиться того, чтобы изображение менялось по клику на нём, асинхронно, рандомно и из директории. Уже ГУГЛИЛ! обгуглился. Даже не в наших интернетах... не нашёл. Сложность в том, что я не могу понять, что мне надо. что искать?
обновлять изображение, или div, в котором оно? Делать ли это ajax'ом или можно обойтись jquery (как бы я хотел)? помогите, пожалуйста, решить вопрос, ребят |
Можно сразу загрузить все изображения или асинхронно , и в свойствах указать им одну и туже позицию с разными z-index ами.
Потом меняя z-index и будет отображаться та что нужно. Как все остальное делать, думаю ясно. |
Цитата:
|
Цитата:
|
Цитата:
-что бы грузились асинхронно и по-одному (чтобы быстро грузилось всё) -чтобы скрипт брал изображения из директории (чтобы каждый раз в код страницы не лазить, а просто скидывать по фтп куда надо) Цитата:
конечно, совсем в идеале, я бы был рад получить сразу пример кода, но врядли кто из вас, я думаю, станет этим заморачиваться. по-этому, мне бы хватило и пары-тройки тегов, по которым гуглить. сразу скажу, что целиком в документацию js и ajax вникать у меня нет время и нужды. Так что хотелось бы от вас услышать, как реализовать то, что я хочу слепить и, допустим, из каких скриптов (галерей, слайдеров, ротаторов) можно было бы что-то позаимствовать и мне кажется, что тут особенно нет нужды ставить серверные скрипты. вот, например, как я сейчас набросал, но там картинка меняется только при обновлении всей страницы целиком. меня же интересует обновление только блока с изображением. извините, если пишу ГЛУПЫЕ или АБСУРДНЫЕ вещи, самому неудобно. но просто не хватает глубоких знаний в вопросе :( |
Цитата:
|
Цитата:
|
вот тут, например, загрузка картинок идёт из файла с ссылками. Это реально так перепилить, чтоб не из файла, а из директории грузились?
а тут ссылки открываются в табе, а не новой страницой. ...open links in the current tab instead of leaving the page "Hijax" links after tab content has been loaded:
$('#example').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
только как это адаптировать под мои нужды? |
ajax-получаешь название файла и путь и меняешь в теге img на него.хотя по сути дела и аякс не нужен если изображений не сотня
|
Модно даже как говорит dmitriymar,
менять ссылку на изображение в тот момент когда например анимация текущего сделает его прозрачность 0, а потом сменить ссылку и увеличить прозрачность до 100 |
Цитата:
0931454574, я вообще не понял, о чём ты говоришь. я же сверху максимально подробно расписал, как в итоге должно всё работать. причём тут анимации и прозрачность? изображение. на него кликаешь - загружается другое, рандомное, из директории. без перезагрузки всей страницы. как сделать? |
AJAX'ом обращаешься к PHP скрипту который прочитает имя рандомного файла из директории и вернет его. В JS меняешь путь на новый полученный.
|
Сегодня - завтра напишу код, посмотришь, а анимация для эффекта) но можно без нее, короче утром посмотришь!
|
walik,
спасибо, что структурировал всё! я сегодня пока по своим делам ходил, мысленно пришёл примерно к такому же решению... 0931454574, искренне благодарю тебя! это было бы просто супер. Может быть потом, когда обкатаем его, отшлифуем, выложишь на какойнить sourceforge или ещё куда) мне кажется, многим бы пригодилось! а по поводу эффектов я даже не думал, по скольку не рассчитывал, что найдётся кто-то, кто согласится помочь. но если бы добавить fade для плавности, было бы ваще карамельно) |
И так сам php файл.
Он делает следующее. Считывает все файлы из директории Создает файл с именами и числом файлов Делает рандомайз и отвечает запросу.
<?php
// путь к директории с файлами
$dir = "image/";
// счетчик количества файлов
// Открыть заведомо существующий каталог и начать считывать его содержимое, после желательно записать
// все в отдельный txt файл, чтобы потом его содержимое занести в массив, который будет формироваться и рендомайзится
// после того как залиты новые фото нужно запустить эту функцию и все файлы будут занесены в текстовый файл
// проверка на необходимость проверять на наличие новых фалов
// проверка существования директории
if (is_dir($dir)) {
// проверка возможности и открытие директории
if ($dh = opendir($dir)) {
// удаляем файл , для того чтобы не дублировать имена
unlink('name.txt');
// записываем все имена файлов в переменную $file пока есть файлы
while (($file = readdir($dh)) !== false)
{
$count++;
// записываем все в txt файл из которого потом будем брать имя в рандомайзе
write_new_name($file);
}
// закрытие директории после чтения
closedir($dh);
//echo $count;
random_image_scr($count);
}
}
//запись имен файлов в тхт файл
function write_new_name($file)
{
// Считаем сколько файлов
//новые записи добавляются в существующий файл
$f = fopen('name.txt','a+');
$file = "$file\r\n";
fwrite($f,$file);
fclose($f);
// закрывать файл функцией fclose не обязательно, но рекомендуется
// возвращает true если все прошло ок.
return true;
}
// РАНДОМАЙЗ ВЫБОРА ИЗОБРАЖЕНИЯ
function random_image_scr($count)
{
$lines = file('name.txt'); // теперь в $lines массив строк файла
$i = ($lines[count($lines)]); // выводим последнюю строку
$r= mt_rand(3,$count); //делаем рандомайз в нужном диапазоне.
$name_file = $lines[$r];
$name_file="image/".$name_file;
echo $name_file;
}
?>
Теперь сам html Он передает запрос php и меняет скрин изображения по загрузке странице, можно повесить на клик , можно анимировать смену изображения , можно загружать массив изображений и т.д.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE>0931454574.blogspot.com</TITLE>
<META name="content-Type" content="text/html; charset=windows-1251">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function()
{
$.post("random.php", { name: "John", time: "2pm" }, // это я к тому что можно параметром что то передать, например нужную директорию и т.д.
function(data){
alert("Data Loaded: " + data);
$("#images").attr("src",data);
});
});
</script>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<body>
<img src="image/1.jpg" id="images">
</body>
</html>
100% все работает. Так что скажи. это то что нужно ??? |
0931454574,
начни учить нормально тотоже рнр -не по курсам попова и ему подобных |
А зачем имена фалов записывать в другой фал, а потом считывать в этом же скрипте, если можно записать их в переменную ?
|
dmitriymar,
walik, Ребята, во первых я сделал то что работает как нужно, во вторых небыло времения делать все проверки и т.д. в третьих не попОв ,а гугл и в четвертых не в переменную, потому как можно все взять в функции и запускать после проверки запроса, например каждый раз делать список файлов глупо, лучше запускать функцию создания списк имен когда добовляются новый картинкию, вот атк |
$dir = "/image"; $dh = opendir($dir); $images = scandir($dir, 1); $image = $images[rand(0, count(images)-3)]; // получаем случайный файл Дополнительная работа с файлами, это лишний геморрой. Ты слишком много тревожишь файлы, для каждой записи ты открываешь, записываешь, закрываешь (достаточно один раз открыть и в конце закрыть). Когда вообще в файл записывать нет необходимости. |
walik,
Безусловно. Но в идеале использовать базу данных, а если и файлы , то во время работы их лучше блокировать(потому как им могут еще пользоваться). Я же говорил что функционал записи в файл нужен только при добавлении новых картинок, просто его нужно поместить в функцию которую потом при необходимости вызывать после загрузки картинок. А об этой функции scandir только сейчас узнал, спасибо Валентин |
0931454574,
во-первых, ещё раз спасибо тебе, что откликнулся. единственный человек с форума. смотри, как у меня работает. только к чему вся морока с php и txt, если мой предыдущий код работл так же и без ошибок (а нынешний периодически сбоит, не могу разобраться почему) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Random Image</title> </head> <body> <div id="reload"> <a href="index.html"><img src="images/image_0.jpg" align="middle" border="0" name="RandomImg" ></a></div> <script language="JavaScript"> <!-- // Genarate random value from 0-5 var rand_no = Math.floor(6*Math.random()); // This defines the source of the preview image (For example images/image_0.jpg) document.images['RandomImg'].src="images/image_" + rand_no + ".jpg"; // --> </script> </body> </html> и по-прежнему картинка меняется только при полном обновлении страницы. сейчас я попробую твой random.php совместить с теми галерейными скриптами, ссылки на которые я выкладывал несколькими постами раньше. ты тоже попробуй допилить код, пожалуйста) |
причём проверки не успел ? вещь элементарная ведь
if( $f = fopen('name.txt','a+')) { ...... } else {.........} |
THER1ON,
Дополнить, в смысле без перегрузки оновление сделать? Тогда так.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE>0931454574.blogspot.com</TITLE>
<META name="content-Type" content="text/html; charset=windows-1251">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function()
{
good();
});
function good()
{
setInterval(random,3000);
}
function random( )
{
$.post("random.php", { name: "John", time: "2pm" },
function(data){
//alert("Data Loaded: " + data);
$("#images").attr("src",data);
});}
</script>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<body>
<img src="image/1.jpg" id="images">
</body>
</html>
|
dmitriymar,
И что? если открылся то функция возращает true и продолжается работа, что не нравится? |
THER1ON,
То что нужно? Посмотрел, изменения внесены) Одно изображение не показывается, нужно узнать почему. Самый простой вариант добавить в javascript вывод и имени файла, чтобы увидеть какой отсутствует! И уже от этого плясать Вот вариант
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<TITLE>0931454574.blogspot.com</TITLE>
<META name="content-Type" content="text/html; charset=windows-1251">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function()
{
good();
});
function good()
{
setInterval(random,3000);
}
function random( )
{
$.post("random.php", { name: "John", time: "2pm" },
function(data){
//alert("Data Loaded: " + data);
$("#images").attr("src",data);
$("#button").attr("value",data);
});}
</script>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<body>
<img src="image/1.jpg" id="images">
<input type="button" name="true" value = "ok" id="button">
</body>
</html>
Понял что не показывает)) берет значение последнего поля в массиве имен, а оно значение количества имен. Так что просто в пхп удалить последнее поля из массива имен. в пхп скрипте измени просто строку $r= mt_rand(3,$count); на $r= mt_rand(3,$count-1); |
Цитата:
|
0931454574,
я не успеваю отвечать, как ты быстро изменения вносишь) вот содержание name.txt: . 3.jpg 5.jpg 4.jpg .. 2.jpg 6.jpg 1.jpg видимо random.php переодически даёт ссылку на точки. не понятно, откуда они берутся в массиве... и ещё я хотел сделать функцию random() на <img src="image/1.jpg" id="images" onclick="">, но у меня не получается. можешь это тоже подправить? UPD: в консоли firebug нашёл подтверждение - random.php даёт "image/.." |
это не точки
|
THER1ON,
в пхп скрипте измени просто строку $r= mt_rand(3,$count); на $r= mt_rand(3,$count-1); что нужно? напиши список ! |
dmitriymar,
а что тогда?) видимо мой идентификатор точек сбоит... 0931454574, я сразу изменил, как ты написал. только всё равно выскакивают неработающие изображения. т.е. это подправить, UPD: и ещё, самое первое изображение, которое появляется при загрузки страницы, тоже должно быть случайным UPD2: onclick я сделал. |
THER1ON,
связанно с работой с директориями-когдато читал о подобном. есть эта тема в книге рнр глазами хакера а она есть в скачке.там очень большой подводный камень |
. - (одна точка) указывает на текущую директорию.
.. - (две точки) указывают на директорию выше (предыдущею). Эти точки во всех папках есть. |
dmitriymar,
walik, и как же добавить их игнорирование? |
THER1ON,
писать скрипт серверный изначально правильно,а то там в каждой строчке потенциальная ошибка зарыта. тем более планировалась заливка по фтп ручная-ну и зачем тогда это там всё? править в переменной колво файлов и случайно отдавать... |
Цитата:
|
пока тему не удалили за оффтоп, резко обращаюсь с вопросом по fade, при смени изображения. я сделал скрипт сам, но само-собой работает он некорректно.
$(document).ready(function()
{
action();
});
function action()
{
$("img#images").click(function(){
$("#images").fadeOut(1000);
});
$.post("random.php", { name: "John", time: "2pm" },
function(data){
//alert("Data Loaded: " + data);
$("#images").attr("src",data);
$("#button").attr("value",data);
});
$("img#images").click(function(){
$("#images").fadeIn(1000);
});
}
нужно, чтобы по клику был fadeout,а дальше с fadein появлялось след.изображение. как это реализовать? |
Тогда просто сделай в html так
немного перепиши функцию good
function good()
{
random();
setInterval(random,1000);
}
так первое изображение будет рандомом. |
0931454574,
я уже с php частью разобрался. меня только интересует, не будет ли увеличиваться задержка при пересчёте массива с именами картинок, когда я буду заливать их всё больше и больше? и сейчас мне нужно разобраться с эффектом fade. есть предложения, как его настроить? Цитата:
|
Наверное потому что на картинку поставить клик нельзя (возможно что можно), заключи картинку в ссылку и обработчик клика на ссылку!
|
THER1ON,
Ты будешь делать пересчет картинок по желанию. Тоесть единожды запуская функцию для формирования тхт файла. просто скопируй ее в отдельный файл и запусти вручную в крайнем случае и ок, а из этого файла что был раньше просто удали и все ок. запускаться будет только когда надо . |
| Часовой пояс GMT +3, время: 18:06. |