Mostrar distintos productos en slide

kimmy · #1 (**permalink**) 22/07/2009, 16:41

Hola amigos:

Tengo el siguiente slide en javascript:

Código HTML:

<head>
<title></title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/stuHover.js" type="text/javascript"></script>
<link rel="stylesheet" href="js/jquery.accessible-news-slider.css" type="text/css" media = "screen, projection" />
<script language="javascript" type="text/javascript" src="js/jquery-1.1.3.1.pack.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.accessible-news-slider.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
    $(".computers_technology").accessNews({
        newsHeadline: "Computers &amp; Technology",
        newsSpeed: "normal"
    });
    /*

    newsHeadline: "Top Stories"  (String)          |  Each unique slider (id) or set of sliders (class) can receive a headline.
    newsSpeed: "normal"          (String/Integer)  |  "slow","normal","fast", or an integer, with 1 being the fastest animation.

    */

});
</script>
</head>
<body>
<!-- Comienzo Slide -->
    <div id="slide">
	<div class="news_slider computers_technology">
            <a href="#skip_to_news_1" class="skip">Skip to news content.</a>
            <a href="#" class="prev"><img src="images/prev.gif" width="16" height="16" alt="Previous" title="Previous" env="images" /></a>
            <a href="#" class="next"><img src="images/next.gif" width="16" height="16" alt="Next" title="Next" env="images" /></a>
            <div class="news_items">
                <a name="skip_to_news_1"></a>
                <div class="container fl">
                    <div class="item fl">
                        <a href="/"><img src="images/photo.gif" width="100" height="100" alt="" class="fl" /></a>
                        <div class="fl">
                            <a href="/">Etiam Porttitor Adipiscing</a><br />
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
                        </div>
                    </div>
                    <div class="item fl">
                        <a href="/"><img src="images/photo2.gif" width="100" height="100" alt="" class="fl" /></a>
                        <div class="fl">
                            <a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br />
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
                        </div>
                    </div>
                    <div class="item fl">
                        <a href="/"><img src="images/photo3.gif" width="100" height="100" alt="" class="fl" /></a>
                        <div class="fl">
                            <a href="/">Etiam Porttitor Adipiscing</a><br />
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
                        </div>
                    </div>
                    <div class="item fl">
                        <a href="/"><img src="images/photo.gif" width="100" height="100" alt="" class="fl" /></a>
                        <div class="fl">
                            <a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br />
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
                        </div>
                    </div>
                    <div class="item fl">
                        <a href="/"><img src="images/photo.gif" width="100" height="100" alt="" class="fl" /></a>
                        <div class="fl">
                            <a href="/">Etiam Porttitor Adipiscing</a><br />
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
                        </div>
                    </div>
                    <div class="item fl">
                        <a href="/"><img src="images/photo.gif" width="100" height="100" alt="" class="fl" /></a>
                        <div class="fl">
                            <a href="/">Praesent Ac Ligula Ac Orci Tempor Blandit</a><br />
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
                        </div>
                    </div>
                    <div class="item fl">
                        <a href="/"><img src="images/photo.gif" width="100" height="100" alt="" class="fl" /></a>
                        <div class="fl">
                            <a href="/">Etiam Porttitor Adipiscing</a><br />
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
                        </div>
                    </div>
                </div>
            </div>
</div>
  <!-- Fin Slide -->
</body>

Este es el enlace en donde funciona: http://www.reviclon.com.ve

lo que necesito saber es como hago para que me cargue las fotos de los productos que tengo guardados en la base de datos.

Se que hago la consulta a la tabla y lo tengo que mostrar pero no se como.

Por favor me dan alguna pista, idea o sugerencia.

Gracias....

GatorV · #2 (**permalink**) 22/07/2009, 17:46

Pues viendo ese código solo es hacer un loop que imprima:

Código html:

Ver original<div class="item fl">
                        <a href="/"><img src="images/photo.gif" width="100" height="100" alt="" class="fl" /></a>
                        <div class="fl">
                            <a href="/">Etiam Porttitor Adipiscing</a><br />
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pharetra nunc a ante.
                        </div>
                    </div>

Desde PHP.

Saludos

kimmy · #3 (**permalink**) 22/07/2009, 17:53

Gracias GatorV, me sugirieron que puedo hacerlo así:

<div class="containter fl"> es donde se carga la info para el slide.
En cada <div class="item fl"> se pone la informacion de productos
Consultar a la base de datos para llenar cada "item fl"

Código HTML:

<div class="container fl">
<?php
foreach($lo_leido_en_base_de_datos as $items) 
{
echo "<div class=\"item fl\">info del item</div>\n";
}
?>
</div>

Se los dejo aqui por si acaso alguno lo necesita.