Случайная смена картинок при повторном наведении
 

Здравствуйте, дорогие форумчане! Много писали про эту тему, но перерыв весь интернет, решения я так и не нашел (искал хорошо). Есть php код (random.php):

<?php
$folder = '.';
$extList = array();
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png';
$img = null;
if (substr($folder,-1) != '/') {
$folder = $folder.'/';
}
if (isset($_GET['img'])) {
$imageInfo = pathinfo($_GET['img']);
if (
isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
file_exists( $folder.$imageInfo['basename'] )
) {
$img = $folder.$imageInfo['basename'];
}
} else {
$fileList = array();
$handle = opendir($folder);
while ( false !== ( $file = readdir($handle) ) ) {
$file_info = pathinfo($file);
if (
isset( $extList[ strtolower( $file_info['extension'] ) ] )
) {
$fileList[] = $file;
}
}
closedir($handle);
if (count($fileList) > 0) {
$imageNumber = time() % count($fileList);
$img = $folder.$fileList[$imageNumber];
}
}
if ($img!=null) {
$imageInfo = pathinfo($img);
$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
header ($contentType);
readfile($img);
} else {
if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);
imagepng ($im);
imagedestroy($im);
}
}
?>

Есть див товара:

<div class="pic">
   <img src="/images/no_photo.jpg" width="220" height="172">
   <div class="mask"></div>
   <div class="zoom"></div>
</div>

С такими стилями:

Собственно, нужно, чтобы при наведении на блоки товаров менялись картинки. Написал JS код:

$( document ).ready(function(){
	$('.pic').mouseenter(function(){
		$('.mask', this).css('background-image', 'url("/images/mask/random.php?rand='+Math.random()+'")');
	});
});

Но картинки не меняются, в чем-то косяк. Помогите пожалуйста.

Sylar V, картинки на товар секретные?

Не работает, берутся картинки из других папок. :(

Картинки сами по себе прозрачны, при наведении появляются.

Нужно только из /images/mask/, да и картинка при данном решении опять же остается одна и та же. :(

Rise,

<script type="text/javascript">
	$( document ).ready(function(){
		$('.pic').mouseenter(function(){
			$('.mask', this).css('background-image', 'url("/images/mask/random.php?rand='+Math.random()+'")');
		});
	});
</script>

Косяк в php?

$('.mask', this) что это за второй параметр? Уберите это, напишите $('.mask')
Посмотрите в инспекторе(F12) на вкладке networks, идет ли запрос картинки (/images/mask/random.php?rand='+Math.random()+') из браузера?

Ну и работает ли php, если его из браузера дергать?

dyhmzall,
Убрал, в инспекторе: /images/mask/random.php?rand=0.7158929682336748.

В браузере по запросу /images/mask/random.php?rand=0.7158929682336748 картинка отдается?

Да.

Меняется картинка только при обновлении страницы, и то со второго раза.

Sylar V,

Во-первых, есть glob(), во-вторых зачем картинки отдавать скриптом, да еще вместо несуществующего изображения показывать то, что будет GD готовить? Можно вообще-то картинку и по-умолчанию иметь, это раз, а еще по уму, так если нет у товара изображений, так и никаких "наведений мышкой" у таких товаров не должно быть.
Что вам мешает имеющиеся изображения, их имена, поместить в тег в атрибут data-img как массив и уже на клиенте брать из него случайное имя, отдавая загрузку браузеру, а не нагружая php и GD без надобности?

laimas,

У товаров есть картинки: <img src="/images/no_photo.jpg" width="220" height="172">

<div class="pic">
   <img src="/images/no_photo.jpg" width="220" height="172">
   <div class="mask"></div>
   <div class="zoom"></div>
</div>

Див с меняющимся background при наведении:
<div class="mask"></div>.

Использовал PHP и JS, так как собственно не знал, как решить данную задачу. Поэтому прошу помощи, желательно подробной.

А это тогда что за издевательство?

if ( function_exists('imagecreate') ) {
header ("Content-type: image/png");
$im = @imagecreate (100, 100)
or die ("Cannot initialize new GD image stream");
$background_color = imagecolorallocate ($im, 255, 255, 255);
$text_color = imagecolorallocate ($im, 0,0,0);
imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color);

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

А далее, чтобы не нагружать сервер, распределяют изображения товара или по их категориям, или по категории с вложенными каталогами изображений каждого товара. Именами таких папок могут служить ID категорий и товаров. То есть при выводе товаров на страницу запутаться с путями практически не возможно. У вас же судя по пути все изображения свалены в кучу.

А если же по уму, то при выводе товаров функцией glob() получаем массив всех имен текущего товара (если имена прописаны в базе, то и ворошить каталоги не нужно), и помещаются в атрибут элемента, который на клиенте и будет активировать их отображение. ID товара известен, по крайней мере без него никак на клиенте, остается в этот массив, или дополнительный атрибут поместить ID категории, если изображения разложены на сервере по уму.

<element data-img="<?=json_encode($ims)"?>> - где $ims, массив имен изображений товара. На клиенте, JQ вернет это массив методом $.data('img'), запускайте генератор случайного от 0 до длина массива -1, формируйте тег <img> на странице (его тоже можно поверх всех показать и без слоев, можно и в слое, как фон совсем не нужно), браузер отобразит.

Примечание, на будущее - random.php?rand=0.7158929682336748, нужно только в том случае, если, например, получаем изображение обращением к индексному файлу, в котором операция его выдачи скриптом находится в самом начале, и ключ запроса ее условие. Если же это отдельный файл, более ничем не занимающийся, то достаточно было бы и /images/mask/random.php?0.7158929682336748

PS. "Cannot initialize new GD image stream" - вы хоть сами понимаете, что это означает? Зачем клиенту это мракобесие? Ну уж если выводить, то членоразделное, они же не программисты, им это GD как диковинное животное, которого они не видели, да еще и на английском, словно у нас поголовно каждый пользователь эсквайр.