Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 66
Sexo: Masculino
Localização: Duque de Caxias / RJ
Contato:

Dividir Ligthbox na mesma página

15-04-2008 08:14

Olá pessoal,

Estou fazendo um teste de um sistema ligthbox e queria q na mesma página ele mostrasse 2 ou mais galerias de imagens separados.

No exemplo q vou postar eu coloquei 2 tour virtual diferentes mais eles estão mostrando uma numeração total e tb uma galeria mostra a imagens da outra.
Não estou conseguindo alterar ou arrumar algum mecanismo q separe as galerias.

<script type="text/javascript" src="box/js/prototype.js"></script> <script type="text/javascript" src="box/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="box/js/lightbox.js"></script> <link rel="stylesheet" href="box/css/lightbox.css" type="text/css" media="screen" />                           <a href="box/images/slideOpera/423.jpg"title="cruzeiro Opera" class="style14"style="color:#023960" rel="lightbox[roadtrip]">Tour Virtual1</a>                         <a href="box/images/slideOpera/cafeteria-Le-vele.jpg" rel="lightbox[roadtrip]"></a>                         <a href="box/images/slideOpera/coffe-bar-Aroma.jpg" rel="lightbox[roadtrip]"></a>                         <a href="box/images/slideOpera/Main-foyer.jpg" rel="lightbox[roadtrip]"></a>                         <a href="box/images/slideOpera/piano-bar-La-Caballa.jpg" rel="lightbox[roadtrip]"></a>                         <a href="box/images/slideOpera/shop.jpg" rel="lightbox[roadtrip]"></a></td>                                                 <a href="box/images/slidemusica/navio.jpg" title="Cruzeiro Musica" class="style14" style="color:#023960" rel="lightbox[roadtrip]">Tour Virtual2</a>                         <a href="box/images/slidemusica/Bar-Della-Cascata.jpg" rel="lightbox[roadtrip]"></a>                         <a href="box/images/slidemusica/Bkeu-Velver-bar.jpg" rel="lightbox[roadtrip]"></a>                         <a href="box/images/slidemusica/cabine2.jpg" rel="lightbox[roadtrip]"></a>                         <a href="box/images/slidemusica/cabine.jpg" rel="lightbox[roadtrip]"></a>                                                 <a href="box/images/slidemusica/galeria-de-artes.jpg" rel="lightbox[roadtrip]"></a>

Aguardo o retorno de vcs e agradeço desde já.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Dividir Ligthbox na mesma página

15-04-2008 12:13

Você pode dividir por tabelas, chamar as galerias por include ou iframe, ela está online?
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 50 postagens
Mais de 50 postagens
Tópico Autor
Mensagens: 66
Sexo: Masculino
Localização: Duque de Caxias / RJ
Contato:

Dividir Ligthbox na mesma página

15-04-2008 14:29

Oi pessoal,

Acho q no item acima me expressei mal. Só estava procurando uma ferramenta para uma página q estou desenvolvndo, mas esbarrei em umproblema e só estava querendo resolver, mas acho q estou acrescentando para outras pessoas q como eu gostaria de ter a mesma ferramenta e tiveram o mesmo problema.
Me desculpe qq coisa.
O Problema esta resolvido, é só colocar uma palavra ou um número q queira aonde tem roadtrip. Ex.: rel="lightbox[roadtrip1]"

  <script type="text/javascript" src="box/js/prototype.js"></script> <script type="text/javascript" src="box/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="box/js/lightbox.js"></script> <link rel="stylesheet" href="box/css/lightbox.css" type="text/css" media="screen" />            <a href="box/images/slideOpera/423.jpg"title="cruzeiro Opera" class="style14"style="color:#023960" rel="lightbox[roadtrip1]">Tour Virtual1</a>          <a href="box/images/slideOpera/cafeteria-Le-vele.jpg" rel="lightbox[roadtrip1]"></a>          <a href="box/images/slideOpera/coffe-bar-Aroma.jpg" rel="lightbox[roadtrip1]"></a>          <a href="box/images/slideOpera/Main-foyer.jpg" rel="lightbox[roadtrip1]"></a>          <a href="box/images/slideOpera/piano-bar-La-Caballa.jpg" rel="lightbox[roadtrip1]"></a>          <a href="box/images/slideOpera/shop.jpg" rel="lightbox[roadtrip]1"></a></td>                    <a href="box/images/slidemusica/navio.jpg" title="Cruzeiro Musica" class="style14" style="color:#023960" rel="lightbox[roadtrip2]">Tour Virtual2</a>          <a href="box/images/slidemusica/Bar-Della-Cascata.jpg" rel="lightbox[roadtrip2]"></a>          <a href="box/images/slidemusica/Bkeu-Velver-bar.jpg" rel="lightbox[roadtrip2]"></a>          <a href="box/images/slidemusica/cabine2.jpg" rel="lightbox[roadtrip2]"></a>          <a href="box/images/slidemusica/cabine.jpg" rel="lightbox[roadtrip2]"></a>                    <a href="box/images/slidemusica/galeria-de-artes.jpg" rel="lightbox[roadtrip2]"></a>

Tá ai pessoal, só gostaria de colocar uma dúvida no forum mais nada.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Dividir Ligthbox na mesma página

15-04-2008 15:38

¨wink¨
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 2

Dividir Ligthbox na mesma página

24-02-2011 22:22

Amigo,

Estou tendo a mesma Dificuldade.

Caso vc Faça a cópia de um... depois de Outro...

SEMPRE só funciona UM, qual seja, o primeiro.

Já tentei repetir os códigos... Mas não deu.

Pessoal acima falou "Só dividir". Então alguém faça esse tal de só dividir e post o código....

Já tentei de tudo que é forma... Tabela o diabo a quatro....

Pensei no IFRAME... porém não dá certo, pois o IFRAME tem que ser do tamanho da imagem.. se não fica ruim.. fica cortando a imagem.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Dividir Ligthbox na mesma página

24-02-2011 22:27

Você diz dividir as imagens usadas no lightbox por grupos? Porque se não me engano tem explicado na documentação do lightbox que essa relação é no rel que vai na imagem.

Te mando esse link
http://designresourcebox.com/snippet/li ... ry-plugin/
* Não é o site do autor do script

Observe esse trecho da página

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

5. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

Fala sobre o que eu disse, sobre criar grupo de imagens para ser usadas.
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Mensagens: 2

Dividir Ligthbox na mesma página

24-02-2011 22:56


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type='text/javascript' src='scripts/jquery.js'></script> <script type='text/javascript' src='scripts/lightbox.js'></script> <link type='text/css' href='css/lightbox.css' rel='stylesheet'/> <link type='text/css' href='css/sample_lightbox_layout.css' rel='stylesheet'/> <style type="text/css"> .lbGallery {         /*gallery container settings*/                         background-color: #0000FF;         padding-left: 2px;         padding-top: 2px;         padding-right: 2px;         padding-bottom: 2px;         width: 800px;         height: auto;         text-align:left;                 }                 .lbGallery ul { list-style: none; margin:0;padding:0; }                 .lbGallery ul li { display: inline;margin:0;padding:0; }                 .lbGallery ul li a{text-decoration:none;}                                         .lbGallery ul li a img {                         /*border color, width and margin for the images*/                         border-color: #FFFFFF;                         border-left-width: 2px;                         border-top-width: 2px;                         border-right-width: 2px;                         border-bottom-width: 2px;                         margin-left:2px;                         margin-right:2px;                         margin-top:1px;                         margin-bottom:1px:                         }                                         .lbGallery ul li a:hover img {         /*background color on hover*/                         border-color: #F00;         border-left-width: 2px;         border-top-width: 2px;         border-right-width: 2px;         border-bottom-width: 2px;                 }                                         #lightbox-container-image-box {                         border-top: 2px solid #ff3300;                         border-right: 2px solid #ff3300;                         border-bottom: 2px solid #ff3300;                         border-left: 2px solid #ff3300;                         }                                         #lightbox-container-image-data-box {                         border-top: 0px;                         border-right: 2px solid #ff3300;                         border-bottom: 2px solid #ff3300;                         border-left: 2px solid #ff3300;                         }                         </style> </head>   <body> <table width="241" border="0">   <tr>     <th scope="col"><div id="gallery" class="lbGallery">                         <ul class="lbGallery">                                 <li>                                         <a href="images/lightboxdemo1.jpg" title="" rel="lightbox"><img src="images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="Flower"/></a>                          </li>                                 <li>                                         <a href="images/lightboxdemo2.jpg" title="" rel="lightbox"><img src="images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="Tree" /></a>                           </li>                                 <li>                                         <a href="images/lightboxdemo3.jpg" title="" rel="lightbox"><img src="images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /></a>                               </li>                                 <li>                                         <a href="images/lightboxdemo4.jpg" title="" rel="lightbox"><img src="images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /></a>                               </li>                                 <li>                                         <a href="images/01x.jpg" title="" rel="lightbox"><img src="images/01.jpg" width="72" height="72" alt="" /></a>                          </li>   </ul> </div></th>   </tr>   <tr>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>   </tr>   <tr>     <td><div id="gallery" class="lbGallery">                         <ul class="lbGallery">                                 <li>                                         <a href="images/lightboxdemo1.jpg" title="" rel="lightbox01"><img src="images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="Flower"/></a>                                </li>                                 <li>                                         <a href="images/lightboxdemo2.jpg" title="" rel="lightbox01"><img src="images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="Tree" /></a>                         </li>                                 <li>                                         <a href="images/lightboxdemo3.jpg" title="" rel="lightbox01"><img src="images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /></a>                             </li>                                 <li>                                         <a href="images/lightboxdemo4.jpg" title="" rel="lightbox01"><img src="images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /></a>                             </li>                                 <li>                                         <a href="images/01x.jpg" title="" rel="lightbox01"><img src="images/01.jpg" width="72" height="72" alt="" /></a>                                </li>   </ul> </div></td>   </tr>   <tr>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>   </tr>   <tr>     <td>&nbsp;</td>   </tr> </table>   <p>   <script type="text/javascript"> $(function(){                         $('#gallery a').lightBox({                                 imageLoading:                   'images/lightbox/lightbox-ico-loading.gif',             // (string) Path and the name of the loading icon                                 imageBtnPrev:                   'images/lightbox/lightbox-btn-prev.gif',                        // (string) Path and the name of the prev button image                                 imageBtnNext:                   'images/lightbox/lightbox-btn-next.gif',                        // (string) Path and the name of the next button image                                 imageBtnClose:                  'images/lightbox/lightbox-btn-close.gif',               // (string) Path and the name of the close btn                                 imageBlank:                             'images/lightbox/lightbox-blank.gif',                   // (string) Path and the name of a blank image (one pixel)                                 fixedNavigation:                true,           // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.                                 containerResizeSpeed:   400,                     // Specify the resize duration of container image. These number are miliseconds. 400 is default.                                 overlayBgColor:                 "#0000FF",              // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.                                 overlayOpacity:                 .6,             // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9                                 txtImage:                               'Image',                                //Default text of image                                 txtOf:                                  'of'                         });                 });   </script> </p> <p>&nbsp;</p> </body> </html>

0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17721
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Dividir Ligthbox na mesma página

24-02-2011 23:04

Não sei qual script de lightbox está usando, mas, segundo a documentação do script que indiquei, diz que para usar grupo de imagens, elas devem estar entre colchetes.

Por exemplo, seu script está assim

<a href="images/lightboxdemo4.jpg" title="" rel="lightbox">.... <a href="images/lightboxdemo5.jpg" title="" rel="lightbox1">....

Deveria estar assim

<a href="images/lightboxdemo4.jpg" title="" rel="lightbox[grupo1]"> <a href="images/lightboxdemo5.jpg" title="" rel="lightbox[grupo2]">

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado