InícioDúvida sobre o slideshow em jquery
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Dúvida sobre o slideshow em jquery
por -=MTS=- 11.11.10 21:08
Boas pessoal, é o seguinte:
A pouco cedo seguindo um tutorial fiz um código Jquery, e ele está funcionando muito bem, o caso é como colocar em meu forum na mensagem da Home Page, eu tentei copiar o código completo mas não deu certo.
Gostaria que alguem respondese a minha dúvida, caso seja algo nescesário aqui está o código:
E ele funciona supinpa Observem esta página que eu criei. Bom se alguem puder responder minha dúvida fico agradecido ^^'
A pouco cedo seguindo um tutorial fiz um código Jquery, e ele está funcionando muito bem, o caso é como colocar em meu forum na mensagem da Home Page, eu tentei copiar o código completo mas não deu certo.
Gostaria que alguem respondese a minha dúvida, caso seja algo nescesário aqui está o código:
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.slide {font-family: verdana; font-size: 11px;}
</style>
<link rel="stylesheet" type="text/css" href="http://habboxhost1.orgfree.com/files/tooltip.css" />
<script type="text/javascript" language="javascript" src="http://habboxhost1.orgfree.com/files/tooltip.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://habboxhost1.orgfree.com/scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="http://habboxhost1.orgfree.com/scripts/jd.gallery.js" type="text/javascript"></script>
<style type="text/css">
a:link {
color: #E3BD00;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #E3BD00;
text-decoration: none;
}
a:hover {
color: #E3BD00;
text-decoration: none;
}
a:active {
color: #E3BD00;
text-decoration: none;
}
.style2 {font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;}
body,td,th {
color: #FFFFFF;
font-family: Calibri, Verdana, Helvetica, sans-serif;
font-size: 6px;
background: #FFFFFF;
}
#myGallery, #myGallerySet, #flickrGallery
{
width: 651px;
height: 160px;
z-index:5;
border: 1px solid #000;
}
#flickrGallery
{
width: 500px;
height: 334px;
}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
display: none;
}
.jdGallery
{
overflow: hidden;
position: relative;
}
.jdGallery img
{
border: 0;
margin: 0;
}
.jdGallery .slideElement
{
width: 100%;
height: 100%;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('img/loading-bar-black.gif');
}
.jdGallery .loadingElement
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('img/loading-bar-black.gif');
}
.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 40px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
* html .jdGallery .slideInfoZone
{
bottom: -1px;
}
.jdGallery .slideInfoZone h2
{
padding: 0;
font-size: 80%;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: inherit;
}
.jdGallery .slideInfoZone p
{
padding: 0;
font-size: 60%;
margin: 2px 5px;
color: #eee;
}
.jdGallery div.carouselContainer
{
position: absolute;
height: 135px;
width: 100%;
z-index: 10;
margin: 0px;
left: 0;
top: 0;
}
.jdGallery a.carouselBtn
{
position: absolute;
bottom: 0;
right: 30px;
height: 20px;
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
}
.jdGallery .carousel
{
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 115px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
.jdExtCarousel
{
overflow: hidden;
position: relative;
}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
position: absolute;
width: 100%;
height: 78px;
top: 10px;
left: 0;
overflow: hidden;
}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
position: relative;
}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
cursor: pointer;
background: #000;
background-position: center center;
float: right;
border: solid 1px #fff;
}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
margin-bottom: 10px;
}
.jdGallery .carousel .label, .jdExtCarousel .label
{
font-size: 13px;
position: absolute;
bottom: 5px;
left: 10px;
padding: 0;
margin: 0;
}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
font-size: 10px;
position: absolute;
bottom: 5px;
right: 10px;
padding: 1px 2px;
margin: 0;
background: #222;
border: 1px solid #888;
cursor: pointer;
}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
color: #b5b5b5;
}
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{
z-index: 15;
position: absolute;
top: 0;
left: 30px;
height: 20px;
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
opacity: .4;
-moz-opacity: .4;
-khtml-opacity: 0.4;
filter:alpha(opacity=40);
}
.jdGallery .gallerySelector
{
z-index: 20;
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
background: #000;
}
.jdGallery .gallerySelector h2
{
margin: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
line-height: 30px;
color: #fff;
}
.jdGallery .gallerySelector .gallerySelectorWrapper
{
overflow: hidden;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
margin-left: 10px;
margin-top: 10px;
border: 1px solid #888;
padding: 5px;
height: 40px;
color: #fff;
cursor: pointer;
float: left;
}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
background: #333;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
background: #000;
background-position: center center;
float: left;
border: none;
width: 40px;
height: 40px;
margin-right: 5px;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #aaa;
}
<!--
#myGallery
{
width: 430px !important;
height: 200px !important;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true
});
}
window.addEvent('domready', startGallery);
</script>
<style>
body{padding:0px;margin:0px;}
</style>
</head>
<body>
<div align="left" class="content">
<div id="myGallery">
<div class="imageElement">
<h3><font size="2">SOTW #1</font></h3>
<p class="style2"><font size="2">Winner: -=MTS=- ( Data: 22/10/10 ) </font></p>
<a href="#" title=" " class="open" target="conteudo_ihabbo"></a><img src="http://b.imagehost.org/0390/Rock.png" class="full"/><img src="http://b.imagehost.org/0390/Rock.png" class="thumbnail" /> </div>
<div class="imageElement">
<h3><font size="2">FCOTW #5</font></h3>
<p class="style2"><font size="2">Winner: Oned+ ( Data: 08/05/10 )</font></p>
<a href="#" title=" " class="open" target="conteudo_ihabbo"></a><img src="http://b.imagehost.org/0432/abstract.png" class="full"/><img src="http://b.imagehost.org/0432/abstract.png" class="thumbnail" /> </div>
</div>
</body>
</html>
E ele funciona supinpa Observem esta página que eu criei. Bom se alguem puder responder minha dúvida fico agradecido ^^'
-=MTS=-- *
- Membro desde : 24/04/2010
Mensagens : 36
Pontos : 75 -
Re: Dúvida sobre o slideshow em jquery
por Solkis 11.11.10 22:34
Boa noite,
Vamos dividir assim, coloque isso em sua folha de estilos CSS:
Isso em qualquer local que aceite HTML:
Até mais.
Vamos dividir assim, coloque isso em sua folha de estilos CSS:
- Código:
a:link {
color: #E3BD00;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #E3BD00;
text-decoration: none;
}
a:hover {
color: #E3BD00;
text-decoration: none;
}
a:active {
color: #E3BD00;
text-decoration: none;
}
.style2 {font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;}
body,td,th {
color: #FFFFFF;
font-family: Calibri, Verdana, Helvetica, sans-serif;
font-size: 6px;
background: #FFFFFF;
}
#myGallery, #myGallerySet, #flickrGallery
{
width: 651px;
height: 160px;
z-index:5;
border: 1px solid #000;
}
#flickrGallery
{
width: 500px;
height: 334px;
}
#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
display: none;
}
.jdGallery
{
overflow: hidden;
position: relative;
}
.jdGallery img
{
border: 0;
margin: 0;
}
.jdGallery .slideElement
{
width: 100%;
height: 100%;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('img/loading-bar-black.gif');
}
.jdGallery .loadingElement
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-image: url('img/loading-bar-black.gif');
}
.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 40px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
* html .jdGallery .slideInfoZone
{
bottom: -1px;
}
.jdGallery .slideInfoZone h2
{
padding: 0;
font-size: 80%;
margin: 0;
margin: 2px 5px;
font-weight: bold;
color: inherit;
}
.jdGallery .slideInfoZone p
{
padding: 0;
font-size: 60%;
margin: 2px 5px;
color: #eee;
}
.jdGallery div.carouselContainer
{
position: absolute;
height: 135px;
width: 100%;
z-index: 10;
margin: 0px;
left: 0;
top: 0;
}
.jdGallery a.carouselBtn
{
position: absolute;
bottom: 0;
right: 30px;
height: 20px;
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
}
.jdGallery .carousel
{
position: absolute;
width: 100%;
margin: 0px;
left: 0;
top: 0;
height: 115px;
background: #333;
color: #fff;
text-indent: 0;
overflow: hidden;
}
.jdExtCarousel
{
overflow: hidden;
position: relative;
}
.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
position: absolute;
width: 100%;
height: 78px;
top: 10px;
left: 0;
overflow: hidden;
}
.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
position: relative;
}
.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
cursor: pointer;
background: #000;
background-position: center center;
float: right;
border: solid 1px #fff;
}
.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
margin-bottom: 10px;
}
.jdGallery .carousel .label, .jdExtCarousel .label
{
font-size: 13px;
position: absolute;
bottom: 5px;
left: 10px;
padding: 0;
margin: 0;
}
.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
font-size: 10px;
position: absolute;
bottom: 5px;
right: 10px;
padding: 1px 2px;
margin: 0;
background: #222;
border: 1px solid #888;
cursor: pointer;
}
.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
color: #b5b5b5;
}
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn
{
z-index: 15;
position: absolute;
top: 0;
left: 30px;
height: 20px;
/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
text-align: center;
padding: 0 10px;
font-size: 13px;
background: #333;
color: #fff;
cursor: pointer;
opacity: .4;
-moz-opacity: .4;
-khtml-opacity: 0.4;
filter:alpha(opacity=40);
}
.jdGallery .gallerySelector
{
z-index: 20;
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
background: #000;
}
.jdGallery .gallerySelector h2
{
margin: 0;
padding: 10px 20px 10px 20px;
font-size: 20px;
line-height: 30px;
color: #fff;
}
.jdGallery .gallerySelector .gallerySelectorWrapper
{
overflow: hidden;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
margin-left: 10px;
margin-top: 10px;
border: 1px solid #888;
padding: 5px;
height: 40px;
color: #fff;
cursor: pointer;
float: left;
}
.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
background: #333;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
background: #000;
background-position: center center;
float: left;
border: none;
width: 40px;
height: 40px;
margin-right: 5px;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
margin: 0;
padding: 0;
font-size: 12px;
font-weight: normal;
color: #aaa;
}
<!--
#myGallery
{
width: 430px !important;
height: 200px !important;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
Isso em qualquer local que aceite HTML:
- Código:
<script type="text/javascript" language="javascript" src="http://habboxhost1.orgfree.com/files/tooltip.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://habboxhost1.orgfree.com/scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="http://habboxhost1.orgfree.com/scripts/jd.gallery.js" type="text/javascript"></script>
<div align="left" class="content">
<div id="myGallery">
<div class="imageElement">
<h3><font size="2">SOTW #1</font></h3>
<p class="style2"><font size="2">Winner: -=MTS=- ( Data: 22/10/10 ) </font></p>
<a href="#" title=" " class="open" target="conteudo_ihabbo"></a><img src="http://b.imagehost.org/0390/Rock.png" class="full"/><img src="http://b.imagehost.org/0390/Rock.png" class="thumbnail" /> </div>
<div class="imageElement">
<h3><font size="2">FCOTW #5</font></h3>
<p class="style2"><font size="2">Winner: Oned+ ( Data: 08/05/10 )</font></p>
<a href="#" title=" " class="open" target="conteudo_ihabbo"></a><img src="http://b.imagehost.org/0432/abstract.png" class="full"/><img src="http://b.imagehost.org/0432/abstract.png" class="thumbnail" /> </div>
</div>
Até mais.
Solkis- Membro Entusiasta
- Membro desde : 26/01/2008
Mensagens : 9983
Pontos : 12071 -
Re: Dúvida sobre o slideshow em jquery
por -=MTS=- 11.11.10 22:55
Olá, não deu certo eu já tinha tentado da forma que você falou em dividir o css e o html. bom eu támbem testei o seu e não funcionou.
Será que isso tem algo a ver com a versão do forum? o meu é punBB
Será que isso tem algo a ver com a versão do forum? o meu é punBB
-=MTS=-- *
- Membro desde : 24/04/2010
Mensagens : 36
Pontos : 75 -
Re: Dúvida sobre o slideshow em jquery
por Byte 11.11.10 23:09
Olá -=MTS=- !
Quando você colocar algo na mensagem da home page, lembre-se de que a mensagem está dentro de um documento HTML, então este código então NÃO pode ter estas Tags:
Corrigindo os erros em HTML e posicionando os códigos, ficaria assim:
< Código >
Eu não olhei o CSS, não sei se há algum erro nele!
Espero estar ajudando -=MTS=- !
Byte
Quando você colocar algo na mensagem da home page, lembre-se de que a mensagem está dentro de um documento HTML, então este código então NÃO pode ter estas Tags:
| <html> <head> <title> </title> </head> <body> </body> </html> |
Corrigindo os erros em HTML e posicionando os códigos, ficaria assim:
< Código >
|
< /Código >  |
Eu não olhei o CSS, não sei se há algum erro nele!
Espero estar ajudando -=MTS=- !
Byte
Byte- Super Membro
- Membro desde : 12/02/2009
Mensagens : 1272
Pontos : 2341 -
Re: Dúvida sobre o slideshow em jquery
por -=MTS=- 11.11.10 23:21
Olá Byte, ainda continua sem funcionar, eu sei que não pode por essas tags, eu copiei o código da minha página html para postar aqui.
Mais alguem?
até mais
Mais alguem?
até mais
-=MTS=-- *
- Membro desde : 24/04/2010
Mensagens : 36
Pontos : 75 -
Re: Dúvida sobre o slideshow em jquery
por -=MTS=- 13.11.10 13:50
Desculpem o double post mas minha dúvida ainda não foi esclarecida.
Então estou upando meu tópico
Então estou upando meu tópico
-=MTS=-- *
- Membro desde : 24/04/2010
Mensagens : 36
Pontos : 75 -
Tópicos semelhantes» Duvida sobre jquery
» Um slideshow em jquery e iframe
» Dúvida slideshow
» Dúvida sobre a CGU
» Como adicionar imagem antes do nome dos grupos?
» Um slideshow em jquery e iframe
» Dúvida slideshow
» Dúvida sobre a CGU
» Como adicionar imagem antes do nome dos grupos?
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
