Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS][JavaScript]Galeria Javascript
lolarz
post
Post #1





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 5.07.2013

Ostrzeżenie: (0%)
-----

Witam mam pewien problem
na jutro muszę zrobić galerie na javascripcie ale totalnie nie wiem jak się za to za brać. Poniżej pokaże o co mi chodzi.
link
1,2 - strzałki do zmieniania zdjęć
3 - opis pierwszy
4 - opis drugi
5 - miniaturka zdjęcia
6 - powiększone zdjęcie

A więc tak:
po kliknięciu w jakąś strzałkę(1, 2) muszą zmieniać się 3,4,5,6
Musi to być coś takiego, że mogę dodać ile tylko chce zdjęć

Nie znam się na tym kompletnie a muszę mieć to na jutro zrobione.

Udało mi się znaleźć jedynie coś takiego:

[HTML] pobierz, plaintext 
  1. <head>
  2. <script type="text/javascript">
  3. var zdjecia = Array(
  4.     Array('duze_zdj', 'miniaturka', 'tytul1', 'opis1'),
  5.     Array('duze_zdj2', 'miniaturka2', 'tytul2', 'opis2'),
  6. );
  7. var max_width = 520;
  8. function laduj() {
  9.     for(var i = 0; i < zdjecia.length; i++)
  10.       document.getElementById('miniaturki').innerHTML += '<img src="' + zdjecia[i][1] + '" onclick="zmien(' + i + ')" />';
  11.     zmien(0);
  12. }
  13. function zmien(id) {
  14.     document.getElementById('zdjecie').innerHTML += '<div id="ladowanie"></div>';
  15.     var custom = '';
  16.     var preload = new Image();
  17.     preload.onload = function() {
  18.         if(preload.width > max_width) 
  19.             custom = ' style="height: '+(Math.floor(max_width / (preload.width / preload.height)))+'px;width:'+max_width+'px;"';
  20.  
  21.         document.getElementById('informacje').innerHTML = '<b><p>'+zdjecia[id][2]+'</p></b><i>'+zdjecia[id][3]+'</i>';
  22.         document.getElementById('zdjecie').innerHTML = '<img src="'+zdjecia[id][0]+'"'+custom+' />';
  23.     }
  24.     preload.src = zdjecia[id][0];
  25. }
  26. window.onload = laduj;
  27. </script>
  28. <style type="text/css">
  29. #ladowanie {
  30.     display: block;
  31.     position: absolute;
  32.     top: 0;
  33.     _top: 50%; /* IE */
  34.     left: 0;
  35.     width: 100%;
  36.     height: 100%;
  37.     background: url('loading.gif') no-repeat center center;
  38. }
  39. </style>
  40. </head>
  41. <div id="miniaturki></div>
  42. <div id="zdjecie></div>
  43. <div id="informacje></div>
[HTML] pobierz, plaintext


Z góry dziękuje za pomoc.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
-xavi_sof-
post
Post #2





Goście
Skoro nie masz zielonego pojęcia o tym to po prostu skorzystaj z gotowca.

Fajna:
http://designshack.net/articles/javascript...ghtbox-gallery/

(IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
lolarz
post
Post #3





Grupa: Zarejestrowani
Postów: 33
Pomógł: 0
Dołączył: 5.07.2013

Ostrzeżenie: (0%)
-----

Ja nie muszę zrobić po prostu galerii tylko coś takiego jak opisałem wyżej.
Jest miniaturka, powiększona miniaturka i dwa opisy do zdjęć.
Po klikaniu w lewą/prawą strzałkę mają się te zdjęcia i opisy zmieniać.

Jeżeli ktoś wie jak to zrobić prosiłbym o pomoc
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 28.09.2025 - 13:00
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn