galeria na stronie

[pantik]

hey w jaki sposób mozna zrobić zeby na stronie była taka przegldarka fotek jak tutaj ???

http://www.art.netgaleria.pl/?przyklad-galerii,1

bo narzie używam programu porta do robiena grafik ale ten jest taki bardzo przejżysty.

strony są wszystkie pisane w htmlu + js + css a nie w php

[LucaS]

Looknij na SimpleViewer, jak dla mnie genialna galeria.
http://www.airtightinteractive.com/simpleviewer/

[pantik]

moja z porty wygląda tak:
http://www.ckzabno.nazwa.pl/images/gale ... index.html


ale chciałbym zeby na stronie głównej tam gdzie mam te małe obrzeczki po kliknięciu otwierało sie tak jak pisałem w pierwszym poście cała strona zaciemniona i obrazek na środku

[in2dex]

To jest skrypt o nazwie lightbox pobrać go możesz stąd: http://www.huddletogether.com/projects/lightbox2/

[pantik]

powiedz mi tylko jeszcze jak to zastosować po polsku jak wstawiś co i gdzie na stronie mojej i czy mam coś dodac do moich stylów css ja mam sronie www.ckzabno.nazwa.pl

[pantik]

i kolejne pytanie:
da sie zrobić zeby mi na tej stronie w tym co mi teraz wysłałes automatycznie sie otworzył filmik reklamowy ? cos jak baner automatycznie wyskakujący z filmikiem zapewne będzie to wma lub jakiś avi którki max 2 minutowy dobrze by było jakby widniał apsek postepu ładowania filmiku niekoniecznie musi byc play stop pausa itp wystarczy zeby to wyskoczyło automatycznie i po naciśnięciu krzyrzyka właczyłą sie strona

[in2dex]

powiedz mi tylko jeszcze jak to zastosować po polsku jak wstawiś co i gdzie na stronie mojej i czy mam coś dodac do moich stylów css ja mam sronie http://www.ckzabno.nazwa.pl

uuuu nowy w branży tu masz skrypt pliki javy script przenosisz na serwer. w tym pakunku masz plik taka instrukcja otwórz ją sobie notatnikiem i tam masz wszystko musisz mieć 2 obrazki miniaturkę i duży obraz

i kolejne pytanie:
da sie zrobić zeby mi na tej stronie w tym co mi teraz wysłałes automatycznie sie otworzył filmik reklamowy ? cos jak baner automatycznie wyskakujący z filmikiem zapewne będzie to wma lub jakiś avi którki max 2 minutowy dobrze by było jakby widniał apsek postepu ładowania filmiku niekoniecznie musi byc play stop pausa itp wystarczy zeby to wyskoczyło automatycznie i po naciśnięciu krzyrzyka właczyłą sie strona

Tu troszkę zamotałeś można wstawić na stronkę plik avi w okienku WMP ale to tak jakbyś wstawiał film z you tube
Może Ci chodzi o coś w rodzaju pup popu flash jak tak to zrezygnuj za dużo czasu, i za mało talentu pozatym sam, tego nie zrobisz

[pantik]

a jest jakiś gotowy skrypt na to ostatnie zebym mugł tylko posdtawić plik filmowy i było by ok ?

mam tam css i images i index i js tylko teraz zebym mógł to dokleić do mojego indexu na stronie to domyślam sie z emusze wklepac to coś na początku obrazka i na końcu ale czy musze coś w moich stylach css zmieniac ???

[in2dex]

2 razy mi się kliknęło delete

[in2dex]

Foldery:
js, images, css; przenosisz na serwer obok index.html, albo index.php
Otwierasz index.html notatnikiem bądź innym edytorem i wklejasz
W nagłówku między HEAD

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

A to styl css zawartość z niego wklej do swojego(zalecane), lub dodaj linijkę:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

A teraz grafika:

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg" alt=""></a>

Wklejasz to gdzieś w BODY zwróć uwagę na pogrubienia i już pewnie się domyślasz jak podmienić grafikę

Co do filmów avi to wrzuć go na you tube potem wklej kod który otrzymasz i powinno być ok

kombinuj kombinuj

[pantik]

romuzmiem ze te pliki co sa w folderze images mam wrzucić do mojego folderu images. a te linijke z css-em mam dodać np gdzieś na koncu mojego industry.css /

[pantik]

wkleiłem tak jak pisało i podtawiłem swoje pliki graficzne ale jak klikam na obrazek to nic sie nie dzieje tylko an samym dole ekrany czli musze zjechac bardzo daleko w dół i tam jest obrazek normnalnie powiększony tak jak bym pod strona duzy obrazek a pod nim jest tylko widoczny krzyżyk

[in2dex]

Połącz te 2 pliki CSS razem i odpowiednio skonfiguruj bo to teraz tam leży wina

[pantik]

Połącz te 2 pliki CSS razem i odpowiednio skonfiguruj bo to teraz tam leży wina

połączyc to rozumiem że mam napisać na końcu mojego indystry.css te linijke co była podana wczesniej ale skonfigurowac to znaczy co mam zrobić nie łapie



końcówka w css-ie moim wygląda tak:

small.super

{

vertical-align: top;

font-size: 0.75em;

line-height: 1.3em;

}



.nodisplay

{

display: none;

}

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

ale jak daje podgląd opera i IE to normalnie mi otwiera tajk jak wczesniej

[pantik]

ten lightbox.scc zawiera

Kod: Zaznacz wszystko

#lightbox{   position: absolute;   left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%   ; }

#imageData{   padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }   
#imageData #caption{ font-weight: bold;   }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;   }         
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}       

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

jak go połączam znaczy dodaje do mojego css-a to efekt jest ten sam