Модератор: [mweb team]
function showPic(pic){
//получаем размеры видимой части окна в зависимости от браузера.
var cliWidth = top.document.compatMode=='CSS1Compat' && !window.opera?top.document.documentElement.clientWidth:top.document.body.clientWidth;
var cliHeight = top.document.compatMode=='CSS1Compat' && !window.opera?top.document.documentElement.clientHeight:top.document.body.clientHeight;
// проверяем не показывается ли в данный момент какая-нибудь большая картинка и если да - уничтожаем ее
if(top.document.getElementById("picture")){top.document.body.removeChild(top.document.getElementById("picture"));}
// создаем див и вставляем в него нашу картинку
var ppic = top.document.createElement("div");
ppic.setAttribute("id","picture");
ppic.style.position = "absolute";
ppic.style.zIndex = "2";
ppic.style.color = "#000";
ppic.style.backgroundColor = "#e0dfe3";
ppic.style.border = "2px outset #fff";
ppic.style.padding = "10px 10px 10px 10px";
ppic.innerHTML = "<img src='" + pic + "' title='скрыть' width="+ pic.split("_")[1].split(".")[0].split("X")[0] +" height=" + img.split("_")[1].split(".")[0].split("x")[1] + " alt='' style='cursor:pointer' onload='setTimeout(\"findCenter()\",100)'>";
top.document.body.appendChild(ppic);
ppic.onclick = function(){top.document.body.removeChild(this)};
ppic.style.top = parseInt(top.document.body.clientHeight/2 - ppic.offsetHeight/2) + top.document.body.scrollTop + "px";
ppic.style.left = parseInt(top.document.body.clientWidth/2 - ppic.offsetWidth/2)+ "px";
}
ppic.style.top = parseInt(top.document.body.clientHeight/2 - ppic.offsetHeight/2) + top.document.body.scrollTop + "px";
ppic.style.left = parseInt(top.document.body.clientWidth/2 - ppic.offsetWidth/2)+ "px";
Muerto писал(а):Не думаю. Просто не успевает картинка загрузиться, а скрипт уже спозиционировал. Честь по чести вычеслив размер 20 пикселей оффсета по вертикали и горизонтали у дива без картинки. А если у картинки есть размеры, то всё путём, место под неё будет зарезервировано и оффсеты дива будут с учетом размеров картинки.
Конечно есть ещё вариант аяксом запросить getimagesize для всех картинок, которые там скрипт формирует, но проще проставить всё-таки размеры вручную в названиях.
<!--
function showPic(pic){
//получаем размеры видимой части окна в зависимости от браузера.
var cliWidth = top.document.compatMode=='CSS1Compat' && !window.opera?top.document.documentElement.clientWidth:top.document.body.clientWidth;
var cliHeight = top.document.compatMode=='CSS1Compat' && !window.opera?top.document.documentElement.clientHeight:top.document.body.clientHeight;
// проверяем не показывается ли в данный момент какая-нибудь большая картинка и если да - уничтожаем ее
if(top.document.getElementById("picture")){top.document.body.removeChild(top.document.getElementById("picture"));}
// создаем див и вставляем в него нашу картинку
var ppic = top.document.createElement("div");
ppic.setAttribute("id","picture");
ppic.style.position = "absolute";
ppic.style.zIndex = "2";
ppic.style.color = "#000";
ppic.style.backgroundColor = "#e0dfe3";
ppic.style.border = "2px outset #fff";
ppic.style.padding = "10px 10px 10px 10px";
ppic.innerHTML = "<img src='" + pic + "' title='скрыть' width="+ pic.split("_")[1].split(".")[0].split("X")[0] +" height=" + img.split("_")[1].split(".")[0].split("x")[1] + " alt='' style='cursor:pointer' onload='setTimeout(\"findCenter()\",100)'>";
top.document.body.appendChild(ppic);
ppic.onclick = function(){top.document.body.removeChild(this)};
ppic.style.top = parseInt(top.document.body.clientHeight/2 - ppic.offsetHeight/2) + top.document.body.scrollTop + "px";
ppic.style.left = parseInt(top.document.body.clientWidth/2 - ppic.offsetWidth/2)+ "px";
}
function findCenter(){
var ppic = top.document.getElementById("picture");
}
//-->
<!--
function showPic(pic){
//получаем размеры видимой части окна в зависимости от браузера.
var cliWidth = top.document.compatMode=='CSS1Compat' && !window.opera?top.document.documentElement.clientWidth:top.document.body.clientWidth;
var cliHeight = top.document.compatMode=='CSS1Compat' && !window.opera?top.document.documentElement.clientHeight:top.document.body.clientHeight;
// проверяем не показывается ли в данный момент какая-нибудь большая картинка и если да - уничтожаем ее
if(top.document.getElementById("picture")){top.document.body.removeChild(top.document.getElementById("picture"));}
// создаем див и вставляем в него нашу картинку
var ppic = top.document.createElement("div");
ppic.setAttribute("id","picture");
ppic.style.position = "absolute";
ppic.style.zIndex = "2";
ppic.style.color = "#000";
ppic.style.backgroundColor = "#e0dfe3";
ppic.style.border = "2px outset #fff";
ppic.style.padding = "10px 10px 10px 10px";
ppic.innerHTML = "<img src='" + pic + "' title='скрыть' width="+ pic.split("_")[1].split(".")[0].split("X")[0] +" height=" + img.split("_")[1].split(".")[0].split("x")[1] + " alt='' style='cursor:pointer' onload='setTimeout(\"findCenter()\",100)'>";
top.document.body.appendChild(ppic);
ppic.onclick = function(){top.document.body.removeChild(this)};
ppic.style.top = parseInt(top.document.body.clientHeight/2 - ppic.offsetHeight/2) + top.document.body.scrollTop + "px";
ppic.style.left = parseInt(top.document.body.clientWidth/2 - ppic.offsetWidth/2)+ "px";
}
function findCenter(){
var ppic = top.document.getElementById("picture");
}
//-->
ppic.innerHTML = "<img src='" + pic + "' title='скрыть' width="800" height="600" alt='' style='cursor:pointer' onload='setTimeout(\"findCenter()\",100)'>";
Честно говоря я не понял, что я должен был туда внести. Как мне было предложено заменить строкуWereWolf писал(а):1. Не вижу чтобы ты внёс корективы в скрипт. Как было с img ...img.split("_")[ так и осталось.
ppic.innerHTML = "<img src='" + pic + "' title='скрыть' width="+ pic.split("_")[1].split(".")[0].split("X")[0] +" height=" + img.split("_")[1].split(".")[0].split("x")[1] + " alt='' style='cursor:pointer' onload='setTimeout(\"findCenter()\",100)'>";
Не работает... Может мы по разному скрипты правим, я по своему (неправильно) , а вы по своему (правильно). Дайте полный текст работающего скрипта, чтоб у нас не было разночтений.WereWolf писал(а):У меня всё работает и должно и у тебя работать.
Ну это конечно не выход, ибо этот скрипт у меня работает на всех страницах сайта, и везде картинки вызываются разного размера. Чем он мне и понравился, это то, что ему не надо было указывать размер картинки - он са ее определяет и располагает в центре экрана.WereWolf писал(а):или делать все картинки 800 на 600
- это наверное был бы идеальный вариант, получился бы хороший кроссбраузерный скрипт, который может еще кому-нибудь пригодился бы.WereWolf писал(а):или третий вариант - написать на AJAX получение размеров картинки.
ppic.innerHTML = "<img src='" + pic + "' title='скрыть' width="+ pic.split("_")[1].split(".")[0].split("X")[0] +" height=" + pic.split("_")[1].split(".")[0].split("x")[1] + " alt='' style='cursor:pointer' onload='setTimeout(\"findCenter()\",100)'>";
2 WereWolf:
Я картинку потом сам подберу, мне просто нужно было узнать как ее к скрипту прицепить, ибо сам пока в скриптах ни бум-бум...
<a class="menu2" onclick="showPic('contact/cyti/tumen.jpg', 500, 333)" href="#null">
function showPic(pic){
//получаем размеры видимой части окна в зависимости от браузера.
// проверяем не показывается ли в данный момент какая-нибудь большая картинка и если да - уничтожаем ее
if(top.document.getElementById("picture")){top.document.body.removeChild(top.document.getElementById("picture"));}
// создаем див и вставляем в него нашу картинку
var ppic = top.document.createElement("div");
ppic.setAttribute("id","picture");
ppic.style.position = "absolute";
ppic.style.zIndex = "2";
ppic.style.color = "#000";
ppic.style.backgroundColor = "#e0dfe3";
ppic.style.border = "2px outset #fff";
ppic.style.padding = "10px 10px 10px 10px";
top.document.body.appendChild(ppic);
get_picture_size(pic);
ppic.onclick = function(){top.document.body.removeChild(this)};
}
function findCenter(){
var ppic = top.document.getElementById("picture");
}
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function get_picture_size(pic) {
var xmlhttp = getXmlHttp();
var url = "get_picture_size.php";
url=url+"?pic="+encodeURIComponent(pic);
url=url+"&dummy="+ new Date().getTime();
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function(answer)
{
if (xmlhttp.readyState == 4)
{
var cliWidth = top.document.compatMode=='CSS1Compat' && !window.opera?top.document.documentElement.clientWidth:top.document.body.clientWidth;
var cliHeight = top.document.compatMode=='CSS1Compat' && !window.opera?top.document.documentElement.clientHeight:top.document.body.clientHeight;
var ppic = top.document.getElementById("picture");
var answer = xmlhttp.responseText.split("|");
ppic.innerHTML = answer;
ppic.style.top = parseInt(cliHeight/2 - answer[2]/2) + top.document.body.scrollTop + "px";
ppic.style.left = parseInt(cliWidth/2 - answer[1]/2)+ "px";
}
}
xmlhttp.send(null);
}
<?php
$pic=$_GET['pic'];
list($width, $height) = getimagesize($pic);
echo '<img src="'.$pic.'" title="скрыть" width="'.$width.'" height="'.$height.'" alt="" style="cursor:pointer" onload=\'setTimeout("findCenter()",100)\'>"|'.$width.'|'.$height;
?>
Хотелось бы понять, каким образом индексируются имена фотографий. Допустим у меня фотка front.jpg и ей прописан alt="Светорегулирующее устройство Алагир". Понятно, что если в поисковике набрать "Устройство Алагир", то эта фотка будет присутствовать в результатах выдачи, несмотря на ее имя - front.jpg. Если же я ей дам имя svetoregulirujushee-ustroystvo-alagir.jpg что-нибудь изменится в лучшую сторону? Я так понимаю, чтобы ей попасть на выдачу, надо в поисковике набрать "ustroystvo alagir" или "svetoregulirujushee ustroystvo", а разве так кто-нибудь делает? Вобщем вопрос вот: если я делаю новую страницу, и прописываю названия устройств в alt, то есть ли смысл их еще и переименовать в svetoregulirujushee-ustroystvo-alagir.jpg? Картинок уже много - около 150 штук, и пустую работу делать не хочется, однако, если это действительно даст ощутимую пользу, я готов потратить нужное кол-во времени и довести это до ума.WereWolf писал(а): Так же советуют давать название фотографиям типа svetoregulirujushee-ustroystvo-alagir.jpg
Muerto писал(а):getimagesize возвращает массив. [0][1] надо.
Werewolf писал(а):Поисковики отлично переводят русские слова написанные латыницей. Так что кто будет искать алагир по русски, поисковик отлично поймёт что alagir это тоже самое.
Muerto писал(а):Переименовывать не надо. Достаточно альта. Можешь для больших картинок сделать псевдопрелоадер плюс индексацию - в начале страницы сделай див со стилем display:none в который засунь все большие какртинки.
<div style="display:none;"><img src="/museum/alagir/top1_big.jpg" alt="Алагир такой-то"><img src="/museum/alagir/back_big.jpg" alt="Алагир такой-то"></div>
Muerto писал(а):Muerto писал(а):Переименовывать не надо. Достаточно альта. Можешь для больших картинок сделать псевдопрелоадер плюс индексацию - в начале страницы сделай див со стилем display:none в который засунь все большие какртинки.
Где-нить вверху страницы:
- Код: Выделить всё
<div style="display:none;"><img src="/museum/alagir/top1_big.jpg" alt="Алагир такой-то"><img src="/museum/alagir/back_big.jpg" alt="Алагир такой-то"></div>
Только это увеличит время загрузки страницы.
Ну че я могу сказать - значит так делать не буду, ибо странички тяжеловаты, действительно.WereWolf писал(а):лучше б я так не делал, там и так под 8 мегабайт грузится...а так прибаввь еще все картинки...тады просто труба...
И Муерто такого же мнения. Я согласен. Что на это можно возразить?Muerto писал(а):Думаю, целевая аудитория сайта с достаточно жирным интернетом сидит, но, по уму, конечно великоваты страницы.
Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 15