Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CodeIgniter]Integracja lightbox problem
Forum PHP.pl > Forum > PHP > Frameworki
jacobson
27.08.2011, 11:41:51
Witam, mam taki problem. Probowalem dolaczyc do swojej strony napisanej w CI jakiegos lightboxa. Probowalem juz kilku i za kazdym razem mam ten sam problem. Zamiast otwierac sie w okienku JS galerii to otwiera mi sie zwykla strona z obrazkiem.
Ostatnio probowalem z prettyPhoto bo ktos mi to polecil
http://www.no-margin-for-errors.com/projec...#33;prettyPhoto
Wczesniej probowalem Slimbox2.
Oba te lightboxy probowalem uruchomic bez zadnego frameworka i wtedy dzialalo bez zarzutow. Wszystkie pliki dodalem jak nalezy, plik css i js laduje w sekcji head w pliku i inicjalizuje dokladnie tak jak jest podane w przykladzie.

Nie wiem czy potrzeba jakos integrowac lighboxa z CodeIgniterem czy czego to moze byc przyczyna?
Moze ktos juz wyprobowal jakiegos lighboxa z CodeIgniterem i jest w stanie mi go polecic smile.gif
z gory dzieki za pomoc,
pozdrawiam
pedro84
27.08.2011, 11:47:38
Podpinasz JS w ogóle?
jacobson
27.08.2011, 12:39:04
no tak no 

[PHP] pobierz, plaintext 
  1.  
  2.         <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/prettyPhoto.css" media="screen"/>
  3.         <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.prettyPhoto.js"></script>
[PHP] pobierz, plaintext
pedro84
27.08.2011, 12:58:57
Sprawdź sobie Firebugiem co masz za błędy i będziesz wszystko wiedział.
jacobson
27.08.2011, 13:27:07
problem w tym ze ja nie mam zadnych bledow... laduje sie strona galerii, wszystko sie laduje poprawnie, po wcisnieciu na link ktory powinien otworzyc okienko JS z galeria to otwiera sie strona z danym zdjeciem. Tak wiec firebug nie znajduje zadnego bledu bo zdjecie sie otwiera. Co z tego ze nie tak jak powinno tongue.gif
pedro84
27.08.2011, 13:30:25
Podaj URL.
jacobson
27.08.2011, 15:02:38
to wszystko mam na localhoscie...

[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  5.         <META HTTP-EQUIV="Content-Language" CONTENT="pl">
  6.         <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css" />
  7.         <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style-slideshow.css" />
  8.         <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/prettyPhoto.css" media="screen"/>
  9.         <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.6.2.min.js"></script>
  10.         <script type="text/javascript" src="<?php echo base_url(); ?>js/slider.js"></script>
  11.         <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.prettyPhoto.js"></script>
  12.         <title><?php echo $title; ?></title>
  13.     </head>
[PHP] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. <script type="text/javascript" charset="utf-8">
  2.     $(document).ready(function(){
  3.         $("area[rel^='prettyPhoto']").prettyPhoto();
  4.  
  5.         $(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
  6.         $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
  7.  
  8.         $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
  9.             custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
  10.             changepicturecallback: function(){ initialize(); }
  11.         });
  12.  
  13.         $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
  14.             custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
  15.             changepicturecallback: function(){ _bsap.exec(); }
  16.         });
  17.     });
  18. </script>
  19. <ul class="gallery clearfix">
  20.     <li><a href="/images/nauka.png" rel="prettyPhoto[gallery1]" title="You can add caption to pictures. You can add caption to pictures. You can add caption to pictures.">123</a></li>
  21. </ul>
[PHP] pobierz, plaintext


reszta to plik css od prettyPhoto i plik JS.

bylbym wdzieczny jakby ktos pod reka mial CI i mogl sciagnac tego lightboxa, bo moze to ja cos zle robie.
markonix
27.08.2011, 15:14:32
Nie chce mi się wierzyć, że FB nic nie pokazuje.
Wyraźnie jest błąd JS (otwarcie strony ze zdjęciem).
vvolv
27.08.2011, 15:17:43
W sumie to są trzy możliwości:
1. Tak jak kolega wyżej napisał, skopałeś coś w kodzie i wywala błędy.
2. Kod jest poprawny(interpretuje się), ale nie przechwytuje zdarzenia.
3. Plugin nadaje się do kosza.

Osobiście obstawiam numer 1.


Edit:
Sprawdź TYLKO to:
[HTML] pobierz, plaintext 
  1.  $("a[rel^='prettyPhoto']").prettyPhoto();
[HTML] pobierz, plaintext


Jeżeli dalej nie działa, sprawdź czy serwer w ogóle serwuje twoje pliki (JS i CSS)
jacobson
27.08.2011, 21:24:26 
[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
  5.         <META HTTP-EQUIV="Content-Language" CONTENT="pl">
  6.         <link rel="stylesheet" type="text/css" href="http://localhost/css/style.css" />
  7.         <link rel="stylesheet" type="text/css" href="http://localhost/css/style-slideshow.css" />
  8.         <link rel="stylesheet" type="text/css" href="http://localhost/css/prettyPhoto.css" media="screen"/>
  9.         <script type="text/javascript" src="http://localhost/js/jquery-1.6.2.min.js"></script>
  10.         <script type="text/javascript" src="http://localhost/js/slider.js"></script>
  11.         <script type="text/javascript" src="http://localhost/js/jquery.prettyPhoto.js"></script>
  12.         <script type="text/javascript" charset="utf-8">
  13.     $(document).ready(function(){
  14.         $("area[rel^='prettyPhoto']").prettyPhoto();
  15.  
  16.  
  17.     });
  18. </script>
  19.         <title>Galeria</title>
  20.     </head>
  21.     <body>
  22.         <div id="container">
  23.             <div id="header">
  24.                 <a href="http://localhost/" id="banner"> </a>                <div id="header_right">
  25.                     <div id="menu">
  26.                         <ul>
  27.   <li><a href="http://localhost/">Strona Główna</a></li>
  28.   <li><a href="http://localhost/uczestnictwo">Uczestnictwo</a></li>
  29.   <li><a href="http://localhost/gallery">Galeria</a></li>
  30.   <li><a href="http://localhost/zajecia">Zajęcia</a></li>
  31. </ul>
  32.                     </div>
  33.                 </div>
  34.             </div>
  35. <ul class="gallery clearfix">
  36.     <li><a href="/images/nauka.png" rel="prettyPhoto" title="You can add caption to pictures. You can add caption to pictures. You can add caption to pictures.">123</a></li>
  37. </ul>
  38. <div id="split_line"></div>
  39. <div id="footer">
  40.     <div id="footer_links">
  41.         <ul>
  42.   <li><a href="http://localhost/o-nas">O nas</a></li>
  43.   <li><a href="http://localhost/kontakt">Kontakt</a></li>
  44. </ul>
  45.     </div>
  46. </div>
  47. </div>
  48. </body>
  49. </html>
[PHP] pobierz, plaintext


aktualnie po zmianie zostalo tak. Firebug nic nie pokazuje.

po wejsciu na strone galerii:
http://screenshotuploader.com/s/9BxmHdMwwt
po nacisnieciu linku ktory powinien odpalic okno js.
http://screenshotuploader.com/s/uAftZndXhE0

nie do konca rozumiem tego ze nie przechwytuje zdarzenia i dlaczego mialby nie przechwytywac i jak to moznaby "naprawic" ?
pedro84
27.08.2011, 22:26:20 
[HTML] pobierz, plaintext 
  1. $("area[rel^='prettyPhoto']").prettyPhoto();
  2.  
  3.  
  4. });
[HTML] pobierz, plaintext

Widzisz subtelną różnicę? Przypatrz się dobrze...
jacobson
28.08.2011, 08:19:20
nawias zamykajacy jest od $(document).ready wiec nie wiem o co innego chodzi ( ten area a samo "a" tez nic nie pomaga) (nawet po jej skasowaniu nic sie nie zmienia). Stad ta prosba czy moze ktos kto ma CI moglby sprawdzic czy jak on wstawi te pliki do siebie na localhosta to zadzialaja.

http://screenshotuploader.com/s/YbwaOGMmMc
nie jestem pewien co to moze oznaczac :/
pedro84
28.08.2011, 18:41:11
A, nie area skoro chcesz przechwytywać kliknięcia na link.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.