|
| |
|
|
| |
для: artcity
(12.05.2012 в 06:23)
| | | Так разве долго под движение мышки переделать. Скрипт будет выглядеть так:
<script>
var sml = [[1,"1s.jpg"],[2,"2s.jpg"],[3,"3s.jpg"],[4,"4s.jpg"],[5,"5s.jpg"]];
var pos = [];
function source(e) {
return e.target || e.srcElement;
}
function loopImages(p) {
p ? sml.push(sml.shift()) : sml.unshift(sml.pop());
var ims = document.getElementById('box').getElementsByTagName('img');
for(i=0; i<ims.length; i++) ims[i].src = sml[i][1];
}
function showBig(e) {
document.getElementById('ctr').src = '?im='+sml[e.id][0];
document.getElementById('big').style.left = pos[0]+40+'px';
document.getElementById('big').style.top = pos[1]+40+'px';
document.getElementById('big').style.display = 'block';
}
function hideBig() {
document.getElementById('big').style.display = 'none';
}
document.onmousemove = function(e) {
if(!e) e = window.event;
var x = e.pageX || e.x;
var y = e.pageY || e.y;
pos = [x, y];
}
</script>
|
А в теге div нужно изменить событие щелчка на событие наведения мыши. Плюс добавим сокрытие большого изображения по выходу с малого:
<div id="box" onmouseover="showBig(source(event))"
onmouseout="hideBig(source(event))">
|
Будет работать так как вам надо. Конечно в примере я не буду писать все, как-то следить за скроллингом на странице и прочее.
Хотя по мне, как я уже сказал, галерея в которой изображения будут бегать за мышкой, это ужас. Такое оправдано, к примеру, у товарного списка, когда по наведению можно получить изображение товара рядом с курсором. А галерея, если и вызов по наведению, то вывод фиксированный, по центру экрана. Посмотрите последнюю версию Picasa. Вот типа такого подхода я понимаю. Можно на слайдере добавить и вызов по наведению, но пока не закроем открытое, ни-ни. Иначе, когда все скачет и прыгает, раздражает.
>но проблема в том что эта переменная получается локальной, а вставить её нужно за пределы функции
Обратите внимание, как используется в примере координаты курсора мышки, которые содержатся в массиве pos. Получает их и помещает в массив одна функция, а пользуется ими и другая.
Книги, это хорошо. Но если ради того, чтобы "подправить" ваш код, то не стоит. Вашу галерею лучше выбросить. Уж лучше подключить jQuery, и готовый плагин галереи к нему. Да и самому можно написать таковую, используя jQuery. Это библиотека, которая возьмет на себя всю черновую работу, то, чего вы не знаете о DOM и JS (хотя использование этой библиотеки не освобождает вас от обязанностей знать, но на первых порах простительно), позволяя описывать только непосредственно механизм работы галереи. Это может быть в итоге всего строк десять кода. | |
| |
|
|
| |
|
|
| |
для: confirm
(11.05.2012 в 16:11)
| | | спасибо за совет!
Посмотрел этот вариант, интересная галерея, но тоже под этот вариант не подходит.
Там при движении мышкой увеличенное изображение тоже двигается и при приближении к краю страницы меняет свое положение... в общем суть в том что все окно там от одного края до другого заполнено картинками... и вариант который пытаюсь добить, в этом случае подходит лучше всего.
я пробовал передать цифру в функцию, дописав в ссылке и в JS переменную count... :
function showtrail(width,height,file, count)
|
но проблема в том что эта переменная получается локальной, а вставить её нужно за пределы функции.... а она уже там не работает =(
я тестировал, к ней привязывал размер окна при наведении... все работает, переменная передается, но как локальная... а в остальных местах JS кода уже не работает...
а нужно вставить её сюда:
if (document.getElementById || document.all)
document.write.......
|
p.s. хотя положительные моменты уже и в этом есть, начал книжку по JS читать... =) | |
| |
|
|
| |
|
|
| |
для: artcity
(11.05.2012 в 10:19)
| | | Цифирки должен отдавать сервер по запросу, а для этого ему нужно передать параметр, по которому он поймет какие цифирки у него запрашивают. А уж воткнуть их на клиенте, так это вопрос второй.
А вообще, вот это практически и есть галерея:
<?php
if(isset($_GET['im'])) {
$ims = array(1=>array('im'=>'1.jpg','dsc'=>15),
2=>array('im'=>'2.jpg','dsc'=>23),
3=>array('im'=>'3.jpg','dsc'=>11),
4=>array('im'=>'4.jpg','dsc'=>43),
5=>array('im'=>'5.jpg','dsc'=>58));
if($id = (int)$_GET['im']) {
if(array_key_exists($id, $ims)) {
echo '<body><div><img src="'.$ims[$id]['im'].'" /></div>
<span>Viewings '.$ims[$id]['dsc'].'</span></body>';
exit;
}
}
}
?>
<!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" xml:lang="ru" lang="ru">
<head>
<style>
#ctr {
display: none;
width:0;
height:0;
}
#big {
display: none;
position: absolute;
z-index: 300;
}
#box {
display: block;
border: 1px dotted #000;
padding: 2px;
width: 288px;
height: 60px;
}
#box img {
border: 0;
float: left;
width: 96px;
height: 60px;
cursor: pointer;
}
</style>
<script>
function source(e) {
return (e.target) ? e.target : e.srcElement;
}
var sml = [[1,"1s.jpg"],[2,"2s.jpg"],[3,"3s.jpg"],[4,"4s.jpg"],[5,"5s.jpg"]];
function loopImages(p) {
p ? sml.push(sml.shift()) : sml.unshift(sml.pop());
var ims = document.getElementById('box').getElementsByTagName('img');
for(i=0; i<ims.length; i++) ims[i].src = sml[i][1];
}
function showBig(e) {
document.getElementById('ctr').src = '?im='+sml[e.id][0];
document.getElementById('big').style.left = '300px';
document.getElementById('big').style.top = '100px';
document.getElementById('big').style.display = 'block';
}
</script>
</head>
<body>
<iframe id="ctr" name="ctr" frameborder="0"
onload="window.document.getElementById('big').innerHTML = ctr.document.body.innerHTML;"
src="about:blank"></iframe><div id="big"></div>
<div id="box" onclick="showBig(source(event))">
<img id="0" src="1s.jpg" />
<img id="1" src="2s.jpg" />
<img id="2" src="3s.jpg" />
</div>
<input type="button" value="<<<" onclick="loopImages(0)" />
<input type="button" value=">>>" onclick="loopImages(1)" />
</body>
</html>
|
Сделайте маленькие картинки размером 96х60, замените имена в скрипте на свои ( в js-массиве sml), и в php-массиве (большие фото), проверьте. Если добавить элементы, стили, разукрасить в общем, то получиться весьма не плохо. Нравится по наведению, измените onclik у id=box на onmousemove, будет по наведению. Добавьте слежение за мышкой (хотя ну ее нафик такую галерею, уж пусть лучше центрируется изображение), и показывайте окно как хотите. Добавить еще закрытие окна по выходу и все.
Как запрашиваются циферки и отдаются из примера видно. Само окно большого изображения, это плавающий фрейм, содержимое которого после загрузки большого фото загружается в div box, поэтому всем элементам, которые могут быть помещены сервером в iframe, будут доступны стили из родительского окна, а также обеспечиваться прямой доступ к ним в js-сценариях.
У вас загрузка tooltip.js, может тогда лучше jquery, да хорошую, хотя и легкую по коду галерею? А то я как дохожу до места:
document.write('<div id="trailimageid"....
так дальше и смотреть не охота. И разбивайте код свой построчно - папирусы с горизонтальной прокруткой неудобно читать. | |
| |
|
|
| |
|
|
| |
для: artcity
(11.05.2012 в 10:14)
| | | Выложу все исходники ещё раз полностью:
все переменные заменяю условными значениями.....
заранее благодарю всех кому не лень будет читать этот код.....
HTML файл с картинками...
<head>
<script type="text/javascript" src="includes/tooltip.js"></script>
</head>
<div class='thumb_img'>
<a href='proj.php' onmouseover='showtrail(320,240,image.jpg);' onmouseout='hidetrail();'>
<img border='0' src='image.jpg' width='160' height='120'>
</a>
</div>
<div id='big_img$id' style='position:fixed; border: 0px solid #000; top: 300px; margin-right: -60%; display: none; width: 150px;'>
<img src='image.jpg' border='0' /></div>
|
и сам скрипт:
/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/
var w=1
var h=1
if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px;border:10px solid #FFFFFF;background:#FFFFFF;font-size:10px;font-family:Arial"><img id="ttimg" src="includes/s.gif" /> Просмотров: ' + ' </div>')
function gettrailobj()
{
if (document.getElementById) return document.getElementById("trailimageid").style
else if (document.all) return document.all.trailimagid.style
}
function truebody()
{
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function hidetrail()
{
document.onmousemove=""
document.getElementById('ttimg').src='/includes/s.gif'
gettrailobj().visibility="hidden"
// gettrailobj().left=-1000
gettrailobj().top=0
}
function showtrail(width,height,file)
{
w=width
h=height + 10
// followmouse()
dis_obj = document.getElementById('ttimg');
dis_obj.src=file
img_obj = gettrailobj();
document.onmousemove=followmouse;
window.onscroll = hidetrail;
if ( isNaN(w) )
img_obj.width = w;
else
img_obj.width=w+"px";
if ( isNaN(h) )
img_obj.height = h;
else
img_obj.height=h+"px"
followmouse( window.event );
img_obj.visibility="visible"
}
function followmouse(e)
{
var xcoord=20
var ycoord=20
if (w <= 0 || h <= 0 || (w == 1 && h == 32)) {
dis_obj = document.getElementById('ttimg');
w = dis_obj.width;
h = dis_obj.height;
img_obj.width=w+"px";
img_obj.height=h+"px"
}
if (typeof e != "undefined")
{
xcoord+= (isNaN( e.pageX ) ? e.clientX : e.pageX );
ycoord+= (isNaN( e.pageY ) ? e.clientY : e.pageY );
}
else if (typeof window.event !="undefined")
{
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+w+3>docwidth)
xcoord=xcoord-w-(20*2)
if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
ycoord=ycoord-h-20;
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}
|
P.S. и это все дело работает!!!! Нужно только добавить цифирку с просмотрами =( | |
| |
|
|
| |
|
|
| |
для: confirm
(11.05.2012 в 08:53)
| | | я бы рад... но я нашел всего лишь один такой скрипт... как раз из него частично код и выложил сюда.
Нужно чтобы было частично похоже на "Фотолиа.ру" (раз уж ссылки нельзя) только по англ.сайт... там слишком много наворотов.. мне достаточно чтобы при наведении была картинка и кол-во просмотров.
Спасибо за ответ ) | |
| |
|
|
| |
|
|
| |
для: artcity
(11.05.2012 в 06:50)
| | | Как бы это помягче выразиться. )
В общем все, что у вас тут написано, это ужас. Выбрасывайте все это, и скачивайте готовый скрипт галереи. Не обязательно как плагин под jQuery, есть и без оной симпатичные. | |
| |
|
|
| |
|
|
| | Доброго времени суток!
В общем, нужно реализовать на сайте галерею.. так чтобы при наведении мышкой
рядом появлялось увеличенное изображение.... как на фотолии например (p.s. ссылку не могу всатвить, форум ругается)
инфа берется из базы данных (адрес картинки, подпись, кол-во просмотров)
все сделал, все получилось..... и все бы ничего, но хочеться чтобы тут появилась идея, чтобы при наведении появлялась не только картинка, но и кол-во просмотров..... поле расширил, текст написал, а вот просмотры он не хочет показывать.
А теперь подробно о коде:
это кусок JS который я переделал чтобы показывал просмотры..
if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px;border:10px solid
#FFFFFF;background:#FFFFFF;font-size:10px;font-family:Arial"><img id="ttimg" src="includes/s.gif" /> Просмотров: ' + ' </div>')
|
это кусок JS который как я понял начинает обрабатываться при наведении...
function showtrail(width,height,file)
{
w=width
h=height + 10
// followmouse()
dis_obj = document.getElementById('ttimg');
dis_obj.src=file
img_obj = gettrailobj();
document.onmousemove=followmouse;
window.onscroll = hidetrail;
if ( isNaN(w) )
img_obj.width = w;
else
img_obj.width=w+"px";
if ( isNaN(h) )
img_obj.height = h;
else
img_obj.height=h+"px"
followmouse( window.event );
img_obj.visibility="visible"
}
|
ну и кусок кода в самой странице
<a href='proj.php?id=$id' onmouseover='showtrail(320,240,$mini_image);' onmouseout='hidetrail();'>
<img border='0' src='$mini_image' width='$image_width' height='$image_height'>
</a>
|
| |
| |
|
| |
|
