Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

[JS] Lightbox v2.0 zamienic w popup

Tworzenie dynamicznych stron internetowych z zastosowaniem JavaScript, jQuery, Ajax. Dowiedz się jak to zrobić, znajdź rozwiązania swoich problemów.

[JS] Lightbox v2.0 zamienic w popup

Post 02.09.2007, 19:49:36

Pytanko wie ktoś jak przerobić tą świetną galerię na popup'a ?
źródło:http://www.huddletogether.com/projects/lightbox2/

chodzi oczywiście żeby startowało po wejsciu na stronę nie po kliknięciu w zdjęcie :)

Ja juz mam dość nie znam się biegle na tym ale mam małe pojęcie. Szukałem i próbowałem i do niczego nie doszedłem.

Pozdrawiam i dzięki
Kulig
Posty: 17
Dołączył(a): 02.09.2007

Post 02.09.2007, 20:14:09

chodzi oczywiście żeby startowało po wejsciu na stronę nie po kliknięciu w zdjęcie :)

w przedostatniej linii pliku lightbox.js masz
Kod: Zaznacz cały
function initLightbox() { myLightbox = new Lightbox(); }
Dopisz do niej
Kod: Zaznacz cały
function initLightbox() { myLightbox = new Lightbox();[b]myLightbox.start(document.getElementById('link'))[/b] }
a gdzieś w dokumencie musi być odnośnik do zdjęcia, które chcesz otworzyć, któremu nadasz ID="link" i rel="lightbox"
Kod: Zaznacz cały
<a href="http://adres.do.pliku.graficznego" id="link" rel="lightbox">link</a>

Taki skrypt, że metoda start() oczekuje referencji do linku. Jeśli nie chcesz, żeby ten link był widoczny na stronie, to możesz w ten sposób
Kod: Zaznacz cały
<body onload="t=document.createElement('a');t.href='images/image-1.jpg';t.rel='lightbox';myLightbox.start(t)">


Jeśli chodzi o pierwszy sposób, to też możesz ten kod zamiast dopisywać do pliku lightbox.js, dopisać do <body>, ale metoda z edycją pliku jest pewniejsza...
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19772
Dołączył(a): 14.04.2002

Post 02.09.2007, 20:48:23

Fantastycznie Dzieki wielkie i chyle czoła - szukałem tego wszędzie i tu też widać taki ze mnie poszukiwacz... ale uczciwie mówiąc ze dw atygodnie.

Nie śmiem pytać ale się przełamie Czy można jeszcze jakiś namiar jak zrobić aby to po odświżeniu strony nie wylatywało bo mam strone na includach zrobiona więc po każdym przełączeniu mi się to teraz załącza.

P.S. Nie bardzo wiem czego szukać bo czy blokada czasowa odswiezania tu pomoze ??

Dzięki z góry
Kulig
Posty: 17
Dołączył(a): 02.09.2007

Post 02.09.2007, 21:01:21

P.S. Nie bardzo wiem czego szukać bo czy blokada czasowa odswiezania tu pomoze ??

musisz bardziej sprecyzować kiedy ma się skrypt wykonywać. Czy tylko raz dla gościa strony? Czy może raz na sesję przeglądarki? A może jeszcze inaczej?
Jednym wyjściem będzie sprawdzanie IP komputera i zapisywanie IP użytkowników na serwerze. Jeśli dane IP już było na stronie (np. w ciągu jednego dnia) to nie wyświetlać skryptu. Innym wyjściem jest zapisanie ciasteczka na komputerze użytkownika i sprawdzanie, czy ciacho jest czy nie.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19772
Dołączył(a): 14.04.2002

Post 02.09.2007, 21:06:03

Raz na sesję przeglądarki.
Tzn. Zeby po wejsciu na stronę wyskakiwało a później czy sie zaloguje czy wróci na główną stronę czy zrobi co innego to już nie.
No chyba ze wyłaćzy przeglądarkę i włączy jeszcze raz to wtedy sie pojawia.
Kulig
Posty: 17
Dołączył(a): 02.09.2007

Post 02.09.2007, 21:11:47

Z tej strony kopiujesz sobie funkcje setCookie i getCookie. Potem dajesz
Kod: Zaznacz cały
<body onload="if(!getCookie('ciacho')){t=document.createElement('a');t.href='images/image-1.jpg';t.rel='lightbox';myLightbox.start(t);setCookie('ciacho','1')}">
i po sprawie. Zapisujemy ciacho, które wygaśnie wraz z zamknięciem sesji przeglądarki
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19772
Dołączył(a): 14.04.2002

Post 03.09.2007, 00:42:17

Troche mi nie idzie to wklejanie. 4 godziny i nie działa. Ze 3 kursy przeczytałem i 5 tysięcy postów na ten temat. w 99% odp było brak a w tym 1% - se wez i poszukaj...
takem czynił i nie znalazłem.

Potrzebuje więcej pomocy nie zebym chciał gotowaca, poprostu nie bardzo wiem co musze wstawić czy dobrze rozumiem:

musze wstawić :
Kod: Zaznacz cały
setcookie("ciacho", "1");// na początku strony w celu wysłania ciuastka ??

A później kod sprawdzającyczy to ciastko jest ??
Kulig
Posty: 17
Dołączył(a): 02.09.2007

Post 03.09.2007, 08:57:27

a co Ci nie działa? kuku podał Ci juz rozwiązanie. jesli nie ma ustawionego ciastka to wywołuje lightboxa i ustawia ciastko. jeśli jest ciacho to nic nie robi :)
arogancik
Wojciech Migas

Posty: 757
Dołączył(a): 10.07.2007
Lokalizacja: Kraków

Post 03.09.2007, 10:57:39

Nie wiem może za długo byłem w wojsku...
ale to mi to nie dizała.
Odświeża mi noramalnie...
Kod
Kod: Zaznacz cały
<?
 include "kcc/index.php";
?>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" >
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

// style
<style type="text/css">
<!--
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;color: #FF0000;}
a:active {text-decoration: none;}
</style>

</head>

//BODY
<body onload="if(!getCookie('ciacho')){t=document.createElement('a');t.href='images/pop.jpg';t.rel='lightbox';myLightbox.start(t);setCookie('ciacho','1')}" background="image/tlo.gif">

// Treść strony
<table width="797" border="0"  align="center" cellpadding="0" cellspacing="0" bgcolor="#EDEEF0">
  <!--DWLayoutTable-->
  <tr>
    <td width="169" height="153">&nbsp;</td>
  <td width="321">&nbsp;</td>
    <td width="301">&nbsp;</td>
    <td width="6"></td>
  </tr>
  <tr>
    <td height="990">&nbsp;</td>
    <td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
        <tr>
          <td width="626" height="990" valign="top">

// link  do lightbox
<a href="http://www.swiatkorali.eu/W/images/image-1.jpg" id="link" rel="lightbox"></a>

</td>
        </tr>
                </table></td>
  <td></td>
  </tr>
  <tr>
    <td height="30">&nbsp;</td>
    <td align="right" valign="middle" bgcolor="#FFFFFF"><!--DWLayoutEmptyCell-->&nbsp;</td>
  <td align="right" valign="bottom" bgcolor="#FFFFFF" php print licznik(); ?>    </td>
  <td></td>
  </tr>
</table>
</body>
</html>


Jakbyś mógł na to spojrzeć będę bardzo wdzięczny
Pozdrawiam
Ostatnio edytowano 03.09.2007, 13:59:44 przez Kulig, łącznie edytowano 1 raz
Kulig
Posty: 17
Dołączył(a): 02.09.2007

Post 03.09.2007, 11:48:41

a dołaczyłes plik do obsługi ciasteczek? bo misze ze nie masz zdefiniowanej funkcji "getCookie". to nie jest funkcja wbudowana w js. kuku podał ci link do stronki gdzie masz funkcje setCookie i getCookie. miałeś je skopiowac do siebie. bez nich nie zadziała. tu masz drugi link [link]http://www.w3schools.com/js/js_cookies.asp[/link] tylko w metodzie setcookie pozbądź się expiredate :)
arogancik
Wojciech Migas

Posty: 757
Dołączył(a): 10.07.2007
Lokalizacja: Kraków

Post 03.09.2007, 14:09:18

lub plik cookies.js
Kod: Zaznacz cały
// JavaScript Document
function setCookie(ciacho,1){
   document.cookie=name+'='+escape(value||'')+
      (expires?';expires='+new Date(+new Date()+expires*864e5).toGMTString():'')+
      (path?';path='+path:'')+
      (domain?';domain='+domain:'')+
      (secure?';secure':'');
}
+ powinno być getcookie ale probowałem duzo i bez sensu zeby smiecic tu tym bo wiem ze bylo źle :(]
Wcześniej zaincludowałem je przed całym kodem (raz jednego raz drugiego - oddzielnie), i miało wyjść pięknie a wyszło jak zawsze że nie działa...

Jeżeli możesz to podpowiedz mi czy robie cos źle
Jak stracisz cierpliwość nie zdziwię się...
Pozdrawiam i dzięki za poświęcony czas
Ostatnio edytowano 04.09.2007, 14:16:44 przez Kulig, łącznie edytowano 1 raz
Kulig
Posty: 17
Dołączył(a): 02.09.2007

Post 03.09.2007, 14:42:57

setCookie dla twoich potrzeb powinno wyglądać tak
Kod: Zaznacz cały
function setCookie(name,value)
{
   document.cookie=name+'='+escape(value||'');
}

setCookie('test','test_value');

całe to sprawdzanie czy jest expires, path i domain było zbędne skoro tego nei przesyłasz, no chyba ze miałes zmienne globalne. co do getCookie to kod jest bardziej skomplikowany
Kod: Zaznacz cały
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    }
  }
return ""
}

alert(getCookie('test'));


odrazu masz przyjkład jak zapisać i odczytać ciastko. teraz juz powinines poradzić sobie sam
arogancik
Wojciech Migas

Posty: 757
Dołączył(a): 10.07.2007
Lokalizacja: Kraków

Post 02.11.2007, 15:31:44

Jak tak samo wywołać na starcie:
http://www.ibegin.com/blog/p_ibox.html

Pochodna lightboxa, ale bardzo lekka i wystarczająca do skromnych potrzeb :)
januszwojtasiak
Posty: 2
Dołączył(a): 02.11.2007
Lokalizacja: W-wa

Post 02.11.2007, 16:00:11

W ramach edukacji, żeby się czegoś nauczyć a nie czekać na gotowca:
1. Odpalasz stronę ze skryptem w przeglądarce Firefox
2. Odpalasz DOM Inspektora (Narzędzia -> Inspektor DOM)
3. Odszukujesz w drzewie DOM inspektora dowolny odnośnik, do którego podpięty jest iBox
4. W prawym panelu Dom Inspektora masz wypisane właściwości elementu. Przełączasz się na widok "JavaScript Object"
5. Odszukujesz własność 'onclick'
6. Analizujesz, co w tym onclicku jest wywoływane i podobnie jak kilka postów wyżej wywołujesz to w <body onload="">. Tylko odpowiednio sobie preparujesz argumenty do przekazania.

Gotowce na Webbazar. Jak nie będziesz umiał tego zrobić sam, to pokaż na forum kod, który wpisałeś w <body onload=""> a my wskażemy błedy, które popełniłeś

PS. Podpowiem tylko, że będziesz jedynie musiał zmienić w tym kodzie słowo kluczowe this na coś innego (na referencję do odnośnika, np. uzyskaną poprzez document.getElementById lub document.links lub w dowolny inny sposób). this występuje w tym onclicku 5 razy.

PS2. Możesz wzorować się trochę na http://forum.webhelp.pl/viewtopic.php?p=812418#812418
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19772
Dołączył(a): 14.04.2002

Post 02.11.2007, 16:12:50

dzięki za motywację ;)
Czas się zabrać do pracy. Dam znać później jak poszło.
januszwojtasiak
Posty: 2
Dołączył(a): 02.11.2007
Lokalizacja: W-wa

Post 21.05.2008, 16:53:05

Witam

Przepraszam, że odkopuję temat ale niestety po zastosowaniu się do instrukcji napisanych w drugim poście u mnie ten efekt nie działa. Nawet w pliku lighbox.js nie ma tej przedostatniej linij gdzie mam dopisać ten kod.
cezars
Posty: 18
Dołączył(a): 08.05.2007

Post 21.05.2008, 17:23:54

Skrypt został uaktualniony... spróbuj tak, ale nie testowałem

W ostatniej linii masz coś takiego
Kod: Zaznacz cały
document.observe('dom:loaded', function () { new Lightbox(); });

Zamień to na
Kod: Zaznacz cały
var myLightbox;
document.observe('dom:loaded', function () { myLightbox=new Lightbox(); });

A potem do <body> dodaj jeden z kodów podanych wyżej: http://forum.webhelp.pl/viewtopic.php?p=812418#812418

Może da się to prościej zrobić, po ostatnich modyfikacjach skryptu, ale nie mam czasu, żeby siedzieć i analizować kod.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19772
Dołączył(a): 14.04.2002

Post 21.05.2008, 19:32:17

Niestety nie działa. Na innym forum dowiedziałem się, że może to być spowodowane tym, że mam już inne efekty wykonane przy użyciu technologii AJAX i, że to właśnie w tym tkwi problem...ale dziwi mnie to ponieważ w sumie nie powinno być komplikacji.
cezars
Posty: 18
Dołączył(a): 08.05.2007

Post 21.05.2008, 20:02:47

Chyba wiem co jest problemem. Wrzuciłeś do strony Lightboxa, który wykorzystuje frameworka Prototype. Później wrzuciłeś do strony jQuery. Zarówno jQuery jak i Prototype definiują tę samą funkcję o nazwie $. One się gryzą ze sobą i przez to masz błędy.
Poczytaj w dokumentacji jQuery o metodzie noConflict i zastosuj się do tego...

ewentualnie, jak korzystasz z jQuery na stronie, to zainteresuj się skryptem thickbox i wykonaj z nim to samo co z Lightboxem. Pod linkiem, który podałem masz przykład załadowania treści, ale poczytasz trochę dokumentacji i źródeł skryptu, to dojdziesz jak to zrobić z obrazkiem.

Co do konfliktu jQuery i Prototype: http://forum.webhelp.pl/viewtopic.php?h ... x&t=168697
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19772
Dołączył(a): 14.04.2002


Powrót do JavaScript


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51520 zarejestrowanych użytkowników.
Najnowszy użytkownik: ThomasNix


Nasi użytkownicy napisali:

  • 937847 wiadomości
  • w 247510 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)