php - галерея, очень нужно!

hentony · 15.12.2006, 17:17

Здравствуйте.
Перебрала почти все бесплатные скрипты для галерей, но ничего не подошло

Мне нужно вот что: на странице есть превью (генерировать их не обязательно, я лучше сама их буду делать), допустим, 20 штук. Нажимая на каждую, на этой же странице загружается большое изображение (плюс желательно еще краткое текстовое описание). Т.е. превьюшки (thrumb) остаются всегда на странице, активная - обведена рамкой (ну, это я могу сделать).

В существующих скриптах обычно превью исчезают и есть только кнопочки - prev и next.

Не знаю, возможно я что-то пропустила, но сама написать скрипт пока не могу, прошу помощи, может кто знает как это реализовать?

Пример такого скрипта: http://www.artlebedev.ru/everything/routine/2006/12/15/

rtm · 15.12.2006, 18:41

А что у Вас собственно не получается? Сделать превью кодом? Показать картинку?

hentony · 15.12.2006, 18:49

Не получается, чтобы ссылка с первью вела на большую картинку, загружаемую на эту же страницу без перезагрузки браузера.

Т.е. грубо говоря - как сделать, чтобы в одно и то же место подгружалась большая картинка по клику на превью, причем большие картинки все разные по размеру?

Какой код нужен для этого места, куда будет грузиться большая картинка? И какой код для ссылок первью...

Спасибо, если поможете.

Skubent · 15.12.2006, 19:03

hentony, по onclick менять src картинки надо.
Причем надо как-то задуматься над тем, куда уползет дизайн при подгрузке "разных по размеру больших картинок"

hentony · 15.12.2006, 19:26

да... я уже вроде разобралась с картинками. Получилось не на php, а на ява-скрипте...

Остался неразрешенный вопрос: картинка-то подгружается, а как сделать, чтобы с ней еще и текст загружался???

Вот тут тест: http://state-of-the-art.spb.ru/test/razminka2.php

вот такой код я использую:

Код:

<style type="text/css">
    #fsClipper { height: 100%; width: 98%; overflow: auto; //overflow: hidden; //overflow-x: auto; }
    .fsControl, #fsLinks a { color: darkblue; cursor: pointer; //cursor: hand; }
     #fsLinks a:active {border:dashed}
    .fsControl.disabled, #fsLinks a.current { color: #000000; cursor: default; text-decoration: none; }
    .fsControl.disabled { color: #666666; }
    #fsScreen { height: 700px ! important; background: no-repeat 0px 25px; }
</style>
<br>
<br>
<p id="fsLinks">
<a href="razminka/[Sketch_Turner]_balt1.jpg" onclick="return Show_picture('razminka/[Sketch_Turner]_balt1.jpg')"><img src="razminka/pic_sm1.gif" border="0"></a>
<a href="razminka/[Sketch_Turner]_balt2.jpg" onclick="return Show_picture( 'razminka/[Sketch_Turner]_balt2.jpg')"><img src="razminka/pic_sm2.gif" hspace="10" border="0"></a>
<a href="razminka/[Sketch_Turner]_balt1.jpg" onclick="return Show_picture( 'razminka/[Sketch_Turner]_balt1.jpg')"><img src="razminka/pic_sm1.gif" border="0"></a>
<a href="razminka/[Sketch_Turner]_balt2.jpg" onclick="return Show_picture( 'razminka/[Sketch_Turner]_balt2.jpg')"><img src="razminka/pic_sm2.gif" hspace="10" border="0"></a></p>
<div id="fsClipper">
    <div id="fsScreen"></div>
</div>
<p>
  <script type="text/javascript">
    function Filmstrip(){
        this.ePicture = document.getElementById('fsScreen');
        this.ePrev = document.getElementById('fsControl_prev');
        this.eNext = document.getElementById('fsControl_next');
        var eLinks = document.getElementById('fsLinks');
        this.aeLink = eLinks.getElementsByTagName('A');
        this.show_picture = function( sBackground, iWidth, iHeight ){
            this.ePicture.style.backgroundImage = "url(" + sBackground + ")";
            if( iWidth )
                this.ePicture.style.width = iWidth;
            if( iHeight )
                this.ePicture.style.height = iHeight;
            this.set_current( sBackground );
        }
        this.set_current = function( sHref ){
            for( var i = 0 ; i < this.aeLink.length ; i++ ){
                if( this.aeLink[i].href.match( new RegExp( sHref + "$" ) ) ){
                    this.aeLink[i].className += " current";
                    this.ePrev.className = this.ePrev.className.replace( /\s+disabled/g, "" );
                    this.eNext.className = this.eNext.className.replace( /\s+disabled/g, "" );
                    if( i == 0 ){
                        this.ePrev.className += " disabled";
                        this.ePrev.onclick = function(){};
                        this.eNext.onclick = this.aeLink[i + 1].onclick;
                    }else if( i == this.aeLink.length - 1 ){
                        this.eNext.className += " disabled";
                        this.eNext.onclick = function(){};
                        this.ePrev.onclick = this.aeLink[i - 1].onclick;
                    }else{
                        this.eNext.onclick = this.aeLink[i + 1].onclick;
                        this.ePrev.onclick = this.aeLink[i - 1].onclick;
                    }
                }else{
                    this.aeLink[i].className = this.aeLink[i].className.replace( /\s*current/g, "" );
                }
            }
        }
    }
    var oFilmstrip = new Filmstrip();
    function Show_picture( sHref, iWidth, iHeight ){
        oFilmstrip.show_picture( sHref, iWidth, iHeight );
        return false;
    }
    oFilmstrip.aeLink[0].onclick();
</script>

Т.е. я подозреваю что в этой части

Код:

<a href="razminka/[Sketch_Turner]_balt1.jpg" onclick="return Show_picture('razminka/[Sketch_Turner]_balt1.jpg')">
<img src="razminka/pic_sm1.gif" border="0"></a>

можно как-то прописать и то, что будет грузиться еще какой-то текст... хотя могу и ошибаться. Не знаете?

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

Т.е.

Код:

#fsLinks a:active {border:dashed}

не помогает, где ошибка?

rtm · 15.12.2006, 19:51

Код:

<style> .previmg { width: 50px; height: 50px; } .bigimg { width: 300px; height: 300px; } </style>
<script language="JavaScript">
	function SetBigImg(src) {
		var obj = document.getElementById('big');
		obj.src = src;
	}
	function SetBorder(id) {
		var obj;
		for(i=1;i<=4;i++) {
        	obj = document.getElementById('p'+i);
        	obj.border = (i==id)?3:0;
		}
	}
	function SetText(txt) {
        if (document.layers) {
           var obj = document.layers.textplace;
            obj.document.write(txt)
            obj.document.close()
        }
        else if (document.all) {
            var obj = textplace;
            obj.innerHTML=txt
        }
	}
</script>

<img class="previmg" id="p1" src="prev1.jpg" onClick="SetBorder(1);SetText('<b>t</b>est1');SetBigImg('http://flasher.ru/forum/images/russian/style3/buttons/top_search.gif');">
<img class="previmg" id="p2" src="prev2.jpg" onClick="SetBorder(2);SetText('t<b>e</b>st2');SetBigImg('http://flasher.ru/forum/images/russian/flasher_logo.gif');"><br>
<img class="previmg" id="p3" src="prev3.jpg" onClick="SetBorder(3);SetText('te<b>s</b>t3');SetBigImg('http://flasher.ru/forum/images/russian/style3/buttons/buddy.gif');">
<img class="previmg" id="p4" src="prev4.jpg" onClick="SetBorder(4);SetText('tes<b>t</b>4');SetBigImg('http://flasher.ru/forum/images/russian/style3/buttons/newthread.gif');"><br>
<img class="bigimg" id="big" src="none.jpg"><br>
<div id="textplace">Нового текста пока нету!</div>

hentony · 16.12.2006, 10:37

Все, у меня получилось!!
Спасибо. Я соединила два кода, кое-что добавила, и вот -

Код:

<style type="text/css">
#showcontent { height: 100%; width: 98%; overflow: auto; //overflow: hidden; //overflow-x: auto;}
.previmg { width: 50px; height: 50px; cursor: hand; }
</style>

<script language="JavaScript">
function changeContent(id)  {
    obj = document.getElementById("content" + id);
    if (!obj) return false;  
    cobj = document.getElementById("showcontent");  
    cobj.innerHTML = obj.innerHTML;  
    return true;
}
function SetBorder(id) {
		var obj;
		for(i=1;i<=4;i++) {
        	obj = document.getElementById('p'+i);
        	obj.border = (i==id)?3:0;
		}
	}
</script>

<!-- Невидимые поля с содержимым -->
<div id="content1" style="display:none;"><img src="razminka/[Sketch_Turner]_balt1.jpg"></div>
<div id="content2" style="display:none;"><img src="razminka/[Sketch_Turner]_balt2.jpg"><br>Текст текст текст</div>
<div id="content3" style="display:none;"><h2>Третья страница</h2><p>Конец!</p></div>
<!-- / Невидимые поля с содержимым -->

<img src="razminka/pic_sm1.gif" class="previmg" id="p1" onClick="changeContent(1); return false;" onMouseDown=" SetBorder(1);">
<img src="razminka/pic_sm2.gif" class="previmg" id="p2" onClick="changeContent(2); return false;" hspace="10" onMouseDown=" SetBorder(2);">
<img src="razminka/pic_sm3.gif" class="previmg" id="p3" onClick="changeContent(3); return false;" onMouseDown=" SetBorder(3);">
<br>
<br>
<div id="showcontent"></div>
<script>
changeContent(1);
</script>

Теперь у меня есть и рамочка и картинка с текстом.
вот тут тест: http://state-of-the-art.spb.ru/test/gallery.php

Chas · 16.12.2006, 15:13

прив. на самом деле фиговый скрипт получился. ибо все "полные" картинки он загружает сразу:

Код:

<div id="content1" style="display:none;"><img src="razminka/[Sketch_Turner]_balt1.jpg"></div>
<div id="content2" style="display:none;"><img src="razminka/[Sketch_Turner]_balt2.jpg"><br>Текст текст текст</div>
<div id="content3" style="display:none;"><h2>Третья страница</h2><p>Конец!</p></div>

если у меня 20 картинок общим весом в 8 мегабайт, я очень сомневаюсь, что пользователю это понравится =) не говоря уж о скорости открытия =)

hentony · 16.12.2006, 19:15

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