[Resolvido] Slideshow de notícias Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema

Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

[Resolvido] Slideshow de notícias

4 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

Ir para baixo

Tópico resolvido [Resolvido] Slideshow de notícias

Mensagem por @Capslock 19.09.10 3:41

Olá,

Dúvida :
queria criar um sistema de noticias igual a esse com imagens passando e uma legenda.
clique no link para ver
http://habboxhost1.orgfree.com/

Procedimentos que foram tentados para resolver :


Captura de tela (quando necessário) :
[Resolvido] Slideshow de notícias Space

Até mais.
@Capslock
@Capslock
***

Membro desde : 24/07/2010
Mensagens : 131
Pontos : 210

http://pixel-forum.forumeiros.com/forum.htm

Ir para o topo Ir para baixo

Tópico resolvido Re: [Resolvido] Slideshow de notícias

Mensagem por Steeph 19.09.10 16:00

Olá!
Bom isso é um slideshow... O código é grande e exige um conhecimento de css e html na hora de atualizar (não é automático). Caso queira, avise!
Mas lembre-se, sempre que for atualizar terá de ir no código e editar manualmente...
Até mais!
Steeph
Steeph
Hiper Membro

Membro desde : 08/03/2010
Mensagens : 2612
Pontos : 3503

http://www.kromusdesign.forumeiros.com http://www.twitter.com/ideasfromsteeph

Ir para o topo Ir para baixo

Tópico resolvido Re: [Resolvido] Slideshow de notícias

Mensagem por orthon 23.09.10 20:51

Opa sera q tem cmo se me explica melhor cmo fazer esse slide show ? Obg
avatar
orthon
***

Membro desde : 04/04/2010
Mensagens : 122
Pontos : 216

http://pro-design.foruns.com.pt/

Ir para o topo Ir para baixo

Tópico resolvido Re: [Resolvido] Slideshow de notícias

Mensagem por danilim1810 23.09.10 21:07

Eu te aconselho fazer um curso de Flash, isso que você pediu não é automático, ou seja, não muda sozinho. Você tem que edit-a-lo manualmente, é trabalhoso e a linguagem mais utilizada para fazer isso é a linguagem Flash.

Faça o seguinte, vá em Painel de controle > Geral > Anúncios e crie um anúncio, ele ficará com destaque no fórum, no topo, como aqui no FDF.
danilim1810
danilim1810
**

Membro desde : 15/09/2010
Mensagens : 97
Pontos : 136

http://ebegam.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: [Resolvido] Slideshow de notícias

Mensagem por Steeph 23.09.10 22:54

orthon escreveu:Opa sera q tem cmo se me explica melhor cmo fazer esse slide show ? Obg
Olá!
Bom, infelizmente é um pouco complicado e não sei lhe explicar direito é fácil, mas ao mesmo tempo qualquer erro de letra ele vai parar de funcionar...
Eu aconselho que veja o código tente entender ou leia mais sobre o html e o java script. Afinal nem todos os códigos são fáceis a ponto de pegar e simplesmente usar....
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: left;
   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="right" class="content">
         <div id="myGallery">         
              <div class="imageElement">

                <h3><font size="2">titulo</font></h3>
              <p class="style2"><font size="2">subtitulo<a target="_blank" href="link">veja os resultados.</a></font></p>               
                 <a href="#" title="  " class="open" target="conteudo_ihabbo"></a><img src="imagem"  class="full"/><img src="imagem" class="thumbnail" />           </div>
<div class="imageElement">

                <h3><font size="2">titulo</font></h3>
              <p class="style2"><font size="2">subtitulo<a target="_blank" href="link">veja os resultados.</a></font></p>               
                 <a href="#" title="  " class="open" target="conteudo_ihabbo"></a><img src="imagem"  class="full"/><img src="imagem" class="thumbnail" />           </div>
<div class="imageElement">

                <h3><font size="2">titulo</font></h3>
              <p class="style2"><font size="2">subtitulo<a target="_blank" href="link">veja os resultados.</a></font></p>               
                 <a href="#" title="  " class="open" target="conteudo_ihabbo"></a><img src="imagem"  class="full"/><img src="imagem" class="thumbnail" />           </div>
<div class="imageElement">

                <h3><font size="2">titulo</font></h3>
              <p class="style2"><font size="2">subtitulo<a target="_blank" href="link">veja os resultados.</a></font></p>               
                 <a href="#" title="  " class="open" target="conteudo_ihabbo"></a><img src="imagem"  class="full"/><img src="imagem" class="thumbnail" />           </div>
 
                               
</div>

</body>
</html>
O código é este acima.
Até mais!
Steeph
Steeph
Hiper Membro

Membro desde : 08/03/2010
Mensagens : 2612
Pontos : 3503

http://www.kromusdesign.forumeiros.com http://www.twitter.com/ideasfromsteeph

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

 
Permissões neste sub-fórum
Não podes responder a tópicos