| |
|
|
| | Господа, возникла коя-какая проблема.
Вообщем ситуация такая: На сайте есть фотогалерея. Картинки в ней открываются хитрым образом без полной перезагрузки страницы. Выглядит примерно так:
<div id="foto" style="width: 500px; height: 500px; background: url('.$this->foto['foto'].') center no-repeat;">С помощью JavaScript меняется параметр ...style.background = '...' соответственно для каждой вновь открываемой картинки. То есть картинка отображается как фон, заданный в style тэга <div>.
Проблема в том, что во всех браузерах все нормально, а в Опере возникает следующий косяк - например, у нас сейчас отображается горизонтальная картинка 500х200, а после нее мы загружаем вертикальную картинку 200х500. Так вот новый фон (в нашем случае - фото из галереи) почему-то обрежется по высоте предыдущей (то есть отобразится только 200х200, а по 150 пикселей снизу и сверху отрежутся). Причем при повторном нажатии на на ссылку отображения новой картинки появится и ее остальная часть. Кроме того, при повторном переходе с первой картинки на вторую все сразу отображается нормально (то есть размер второй картинки уже прокешировался и она сразу выводится в полном размере).
Я понимаю, что это уже скорее косяк Оперы, а не скрипта. Вообщем вопрос такой: можно ли этот глюк как-то обойти - например, сделать чтобы для Оперы нажатие на ссылку отображения фотки делалось принудительно двойным (то есть тыкаешь 1 раз, а нажимается как бы 2) - ведь при повторном нажатии на ссылку отрезанная часть догружается. Или еще как-то обмануть Оперу. Я просто в JavaScript не силен (больше по части PHP), а менять полностью структуру вполне рабочей галереи из-за глюков Оперы как-то не хочется...[/b] | |
| |
|
|
| |
|
|
| |
для: Mn_Specter
(07.02.2008 в 18:38)
| | | Ммм попробуйте поиграться со свойствами "position" и "display" | |
| |
|
|
| |
|
|
| |
для: Mn_Specter
(07.02.2008 в 18:38)
| | | Я не уверен что поможет, но если после того как размеры картинок прокешировались они выводятся нормально, можно создать предзагрузчик для картинок. Он прокеширует все картики, т. е. после загрузки страници все картинки уже будут в кеше браузера. Предзагрузчик выглядет так:
function preloadImages() {
if(!document.images) return;
arg=preloadImages.arguments;
upImages=new Array();
for(var i=0;i<arg.length;i++) {
upImages[i]=new Image();
upImages[i].src=arg[i];
}
}
window.onload=function() {
preloadImages(img1,img2,...,imgN);
}
|
Может поможет | |
| |
|
|
| |
|
|
| |
для: Mn_Specter
(07.02.2008 в 18:38)
| | | Попробуйте ещё такой финт, хз поможет или нет
with(document.getElementById("foto").style)
{width="";
height="";
backgroundImage="url('...............')";
width="500px";
height="500px";
}
|
код не тестировался, так что возможны ошибки | |
| |
|
|
| |
|
|
| |
для: вялый
(07.02.2008 в 21:05)
| | | Что-то ни тот, ни другой способ результата не дает :(
Хотя, вполне вероятно, что я просто не правильно делаю что-то (говорю же, в JavaScript не силен).
Вообщем если подробнее, то ситуация там такая:
Сама картинка, как я уже говорил, выводится вот таким кодом:
<div id="foto_conteiner" style="width: 500px; height: 500px; background: url('.$this->foto['foto'].') center no-repeat;">'.$sale.'</div>
|
Меню с превьюшками, щелчок по которым выводит это самое изображение задается так:
<div class="foto_sub">
<a href="#" onclick="Foto_ch(\''.$foto['foto'].'\','.$foto['id'].');">
<img src="./galery/'.$foto['foto_mini'].'" width="'.$size1[0].'" height="'.$size1[1].'" alt="'.$foto['name'].'" title="'.$foto['name'].'" class="'.$class.'" id="foto_'.$foto['id'].'" />
</a>
</div>
|
Все JavaScript-ы хранятся в отдельном файле:
function _get(a){ return document.getElementById?document.getElementById(a):null}
galery_engine = function() {
if (_get('sub') == null) return;
li = _get('sub').childNodes;
for (i = 0; i < li.length; i++) {
if(li[i].tagName == 'LI')
{
li[i].onmouseover = function() {
this.className += 'here';
}
li[i].onmouseout = function() {
this.className = this.className.replace('here', '');
}
li[i].onclick = function() {
window.location = this.id;
}
}else if(li[i].tagName == 'DIV'){
var div = li[i].childNodes;
for(j = 0;j<div.length;j++) {
if(div[j].tagName == 'DIV') {
img = div[j].childNodes;
for(m = 0;m<img.length;m++) {
if(img[m].tagName == 'A') {
link = img[m].childNodes;
for(k = 0;k<link.length;k++) {
if(link[k].tagName == 'IMG') {
link[k].onmouseover = function() {
if(this.className != 'im_foto_sel') {
this.className = 'im_foto_hov';
}
}
link[k].onmouseout = function() {
if(this.className != 'im_foto_sel') {
this.className = 'im_foto';
}
}
}
}
}
}
}
}
}
}
}
window.onload = galery_engine;
function Foto_ch(id,id1) {
var foto = _get('foto_conteiner');
var par = _get('picture');
var foto_mini = _get('foto_'+id1);
var sub = _get('sub');
var refreshCC;
foto.style.background = 'url(galery/'+id+') center no-repeat';
var fotos = sub.getElementsByTagName('IMG');
for (i = 0; i < fotos.length; i++) {
if(fotos[i].tagName == 'IMG') {
fotos[i].className = 'im_foto';
}
}
if(_get('frame')) {
_get('frame').innerHTML =_get('frame').innerHTML;
}
}
|
Объясните пожалуйста дураку на пальцах, куда что дописать нужно :) | |
| |
|
|
| |
|
|
| |
для: Mn_Specter
(08.02.2008 в 14:50)
| | | Всем спасибо за помощь! Проблема решилась.
Если в двух словах, то основная суть была в том, что менять скриптом нужно весь div, а не только его style. | |
| |
|
|
