PHP do Slideshow - by tmferreira

nknk · Julho 14, 2007

Resolvi adaptar o código do slideshow do tmferreira, pois não tinha encontrado no forum, da seção css para as cincos últimas notícias do banco de dados, qualquer erro, posta ae.

Também acrescentei uma limitação de 400 caracteres para a exibição do texto, em relação as imagens eu resolvi tirar, mas para implementar basta colocar uma condição se foi enviada uma imagem para a tabela de notícia

http://forum.imasters.com.br/index.php?showtopic=212347

<div id="slideshow" name="slideshow">				<div id="links" name="links">				<ul>				<?php				require("con.php");				$sql = mysql_query("SELECT * FROM tabeladenoticias ORDER BY data DESC LIMIT 5");				$i=1;				$class="ativo";				while($mostrar = mysql_fetch_assoc($sql)) {				 echo 	"<li id=link$i name=link$i class=$class><a href=#>$i</a></li>";	?> 				<? $i++; $class="inativo";} ?>				</ul>		   		</div>					  <div id="slides" name="slides">			<?php				$sql2 = mysql_query("SELECT * FROM  tabeladenoticias ORDER BY data DESC LIMIT 5");				$class="visible";				$j=1;				while($mostrar2 = mysql_fetch_assoc($sql2)) {				echo "<div id=slide$j name=slide$j class=$class>					<span class=titulo>$mostrar2[titulodanoticia]</span><br>"; ?> <?				 $r1=$mostrar2['textodanoticia']; $r12= substr($r1, 0,400); 				  echo  "<span class=conteudo><p align=justify>$r12...  <a href=http://.../ID da noticia> ler esta notícia</a></p></span>				 </div>"; ?> 					<? $j++; $class="hidden"; } ?>			  </div>					</div>

JackDenio · Janeiro 31, 2008

Fala nknk beleza? Velho faz algum tempo já, após ver sua adaptação, eu adaptei também esse código do tmferreira, so que agora eu estava querendo fazer algo que talvez seja simples mas não estou conseguindo ...tipo meu slide é de imagens e abaixo delas ficam os números, o que eu estava querendo era colocar uma div à parte da div das imagens onde figurasse o título da imagem ..como eu poderia fazer isso velho, me de uma opinião ..

nknk · Janeiro 31, 2008

RomanMg basta você substituir na linha, se foi o q entendi:

<span class=titulo>$mostrar2[titulodanoticia]</span><br>

por

<div>$mostrar2[titulodaimagem]</div>

ou

<div>$mostrar2[titulodaimagem] ...imagem </div>

JackDenio · Janeiro 31, 2008

Sim..mas desse jeito o título fica dentro do loop e da div "slides" ..eu queria o nome abaixo em outra div ao lado dos números ..entendeu? Mas valeu a força !!

nknk · Janeiro 31, 2008

Já tentou 3 whiles? Depois você pode arrumar com css.

Coloque o código q você tentou fazer talvez eu entenda melhor.

Pelo que entendi, qdo ele mudar de número e imagem o titulo deve mudar tb. Não sei ao certo, mas talvez tivesse q mudar no javascript tb.

JackDenio · Fevereiro 1, 2008

Isso mesmo velho..vai ter que mexer no js pra poder modificar, mas como eu sou expert em js :P não conseguir..até tentei umas gambiarras ..vo postar aqui o que eu tentei alterando algumas coisas no js sem sucesso, vo postar so o php ..

<div id="titulo">
				<?php  
	$sql3="SELECT * FROM  portfolio order by id_portfolio desc LIMIT 5";
				$exe3= mysql_query($sql3,$conexao);
				$class="visible";
				$i=1;
				while($mostrar3 = mysql_fetch_assoc($exe3)) {
				$id = $mostrar3['id_portfolio'];
				echo "<div id=titul$j name=titul$j class=$class width = 318px>";
				  echo  "<span class=conteudo><p align=center><a href=../portfolio/index.php?id=$mostrar3[id_portfolio]>
				  $mostrar3[titulo]</a></p></span>
				 </div>"; ?> 
					<?php $i++; $class="hidden"; } ?>
			 </div>

nknk · Fevereiro 1, 2008

Sem modificar o js não sei uma solução do do jeito que você precisa(fora da div slides). Estava tentando ajustar o js colocando um efeito fade in fade out, mas nao certo, tem mta coisa de js q não manjo.

hugosenna · Fevereiro 16, 2008

meu serviu legal esse js, vlw pessoal

Von_Reibnitz · Agosto 16, 2008

olha como ficou o meu

CODE

<html> 
    <head> 
        <title>S l i d e S h o w - by tmferreira</title> 
        <style><!-- 
            * { 
                margin: 0; 
                padding: 0; 
                list-style: none; 
                text-decoration: none; 
                font-family: Verdana, Arial, Helvetica, Sans-Serif; 
            } 
            div#slideshow { 
                height: 250px; 
                width: 500px; 
                border: 1px solid black; 
            } 
            div#slideshow #links { 
                float: right; 
                clear: both; 
                width: 10%; 
                text-align: center; 
            } 
            div#slideshow #links li { 
                font-size: 12px; 
                border-top: 1px solid white; 
                line-height: 49px; 
            } 
            div#slideshow #links li.inativo { 
                background: #EEEEEE; 
            } 
            div#slideshow #links li.ativo { 
                background: #D9D9D9; 
            } 
            div#slideshow #slides { 
                background: #BBBBBB; 
                height: 100%; 
                color: white; 
                font-size: 14px; 
            } 
            div#slideshow #slides .visible { 
                display: block; 
            } 
            div#slideshow #slides .hidden { 
                display: none; 
            } 
            div#slideshow #slides div span { 
                display: block; 
            } 
            div#slideshow #slides .titulo{ 
                font-weight: bold; 
                font-size: 16px; 
                padding: 5px 0 0 5px; 
            } 
            div#slideshow #slides .conteudo { 
                padding: 0 0 0 5px; 
            } 
        --></style> 
        <script type="text/javascript"> 
            var tempo; 
            var intervalo = 2000; //Intervalo entra as mudanças de slides. Definido em milisegundos. 
            function $(campo) { 
                return document.getElementById(campo); 
            } 
            //Trecho de código criado por Wilker, pego em http://forum.imasters.com.br/index.php?s=&...st&p=660522 
            var $A = Array.from = function(iterable) { 
                if (!iterable) return []; 
                if (iterable.toArray) { 
                    return iterable.toArray(); 
                } else { 
                    var results = []; 
                    for (var i = 0; i < iterable.length; i++) 
                        results.push(iterable); 
                    return results; 
                } 
            }; 
            Function.prototype.bind = function() { 
                var __method = this, args = $A(arguments), object = args.shift(); 
                return function() { 
                    return __method.apply(object, args.concat($A(arguments))); 
                }; 
            }; 
            //Fim do trecho de código criado por Wilker 
            function addEvent(obj, evType, fn) { //Função adaptada da original de Christian Heilmann, em http://www.onlinetools.org/articles/unobtr...t/chapter4.html 
                if (typeof obj == "string") { 
                    if (null == (obj = document.getElementById(obj))) { 
                        throw new Error("Elemento HTML não encontrado. Não foi possível adicionar o evento."); 
                    } 
                } 
                if (obj.attachEvent) { 
                    return obj.attachEvent(("on" + evType), fn); 
                } else if (obj.addEventListener) { 
                    return obj.addEventListener(evType, fn, true); 
                } else { 
                    throw new Error("Seu browser não suporta adição de eventos."); 
                } 
            } 
            function nextSlide() { 
                var divs = $('slides').getElementsByTagName('div'); 
                var i; 
                for (i = 0; i < divs.length; i++) { 
                    if (divs.className == 'visible') { 
                        divs.className = 'hidden'; 
                        $('link' + (i + 1)).className = 'inativo' 
                        i = (i == divs.length - 1) ? 0 : i + 1; 
                        divs.className = 'visible'; 
                        $('link' + (i + 1)).className = 'ativo' 
                        break; 
                    } 
                } 
            } 
            function init() { 
                var as = $('links').getElementsByTagName('a'); 
                var i; 
                for (i = 0; i < as.length; i++) { 
                    var f = function(v) { 
                        setSlide(as[v]); 
                    } 
                    addEvent(as, 'click', f.bind(this, i)); 
                } 
                tempo = setInterval('nextSlide()', intervalo); 
            } 
            function setSlide(link) { 
                var divs = $('slides').getElementsByTagName('div'); 
                var i; 
                for (i = 0; i < divs.length; i++) { 
                    divs.className = 'hidden'; 
                } 
                var lis = $('links').getElementsByTagName('li'); 
                for (i = 0; i < lis.length; i++) { 
                    lis.className = 'inativo'; 
                } 
                link.parentNode.className = 'ativo'; 
                i = parseInt(link.firstChild.data); 
                $('slide' + i).className = 'visible'; 
                clearInterval(tempo); 
            } 
            addEvent(window, 'load', init); 
        </script> 
    </head> 
    <body> 
<div id="slideshow" name="slideshow"> 
                <div id="links" name="links"> 
                <ul> 
                <?php 
                $sql = mysql_query("SELECT * FROM noticias_dados where destaque='sim' order by id desc LIMIT 5"); 
               $sql2 = mysql_query("SELECT * FROM noticias_dados where destaque='sim' order by id desc LIMIT 5"); 
                $i=1; 
                $class="ativo"; 
                while($mostrar = mysql_fetch_assoc($sql)) { 
                 echo     "<li id=link$i name=link$i class=$class><a href=#>$i</a></li>";    ?> 
                <? $i++; $class="inativo";} ?> 
                </ul> 
                   </div> 
                      <div id="slides" name="slides"> 
            <?php 
                $sql2 = mysql_query("SELECT * FROM noticias_dados where destaque='sim' order by id desc LIMIT 5"); 
                $class="visible"; 
                $j=1; 
                while($dados2=mysql_fetch_array($sql2)) { 
                echo "<div id=slide$j name=slide$j class=$class> 
                    <span class=titulo>$dados2[titulo]</span><br>"; ?> <? 
                 $r1=$mostrar2['texto']; $r12= substr($r1, 0,400); 
                  echo  "<a href='?pg=noticia&id=$dados2[id]'><img vspace='2' src='thumbs.php?w=400&imagem=images/noticias/$dados2[id]/$dados2[foto01]' border='$dados2[borda]'><br>$dados2[subtitulo]</a></p></span> 
                 </div>"; ?> 
                    <? $j++; $class="hidden"; } ?> 
              </div> 
 
        </div> 
    </body> 
</html> 

mas as imagens é que estão comproblemas pois não ficam em tamanho fixo.

podem ver ele aqui:

TESTE

Von_Reibnitz · Agosto 16, 2008

jah arrumei!

Arquivado

PHP do Slideshow - by tmferreira

Recommended Posts

nknk 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

JackDenio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

nknk 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

JackDenio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

nknk 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

JackDenio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

nknk 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

hugosenna 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Von_Reibnitz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Von_Reibnitz 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante