0

Olá, estou com esse código abaixo:

        <div class="center_content" style="background:<?php echo $res['fundosite_cor']; ?>; width:588px; float:left;">
    <?php
    include "conexao.php";
    $codigo = $_POST['codigo'];
    $img01 = $_POST['img01'];
    $img02 = $_POST['img02'];
    $img03 = $_POST['img03'];
    $img04 = $_POST['img04'];
    $titulo = $_POST['titulo'];
    $preco = $_POST['preco'];
    $query = mysql_query("SELECT * FROM produto ORDER BY RAND() LIMIT 9");

    while($res = mysql_fetch_array($query)){
    ?>

    <div style="background-color:<?php echo $res['fundosite_cor']; ?>;; padding:11px;" class="center_prod_box">

            <div id="titulo" class="product_title">
                <?php echo $res['titulo']; ?>
            </div>
        <script>
            jssor_slider2_starter = function (containerId) {
                var options = {
                    $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

                    $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                        $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                        $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                        $AutoCenter: 0,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                        $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                        $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                        $SpacingX: 0,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                        $SpacingY: 0,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                        $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                    }
                };
                var jssor_slider2 = new $JssorSlider$(containerId, options);
            };
        </script>
        <!-- Jssor Slider Begin -->
        <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
        <div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 173px;
            height: 173px; background-color:<?php echo $res['fundosite_cor']; ?>;">

            <!-- Loading Screen -->
            <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                    background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
                </div>
                <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center;
                    top: 0px; left: 0px;width: 100%;height:100%;">
                </div>
            </div>

            <!-- Slides Container -->
            <div u="slides" style="background-color:<?php echo $res['fundosite_cor']; ?>;cursor: move; position: absolute; left: 0px; top: 2px; height:150px; width:173px; text-align:center;
                overflow: hidden;">
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img01']; ?>" />
                    </a>
                </div>
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img02']; ?>" />
                    </a>
                </div>
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img03']; ?>" />
                    </a>
                </div>
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img04']; ?>" />
                    </a>
                </div>
            </div>

            <!--#region Bullet Navigator Skin Begin -->
            <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
            <style>
                /* jssor slider bullet navigator skin 03 css */
                /*
                .jssorb03 div           (normal)
                .jssorb03 div:hover     (normal mouseover)
                .jssorb03 .av           (active)
                .jssorb03 .av:hover     (active mouseover)
                .jssorb03 .dn           (mousedown)
                */
                .jssorb03 {
                    position: absolute;
                }
                .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
                    position: absolute;
                    /* size of bullet elment */
                    width: 21px;
                    height: 21px;
                    text-align: center;
                    line-height: 21px;
                    color: white;
                    font-size: 12px;
                    background: url(img/b03.png) no-repeat;
                    overflow: hidden;
                    cursor: pointer;
                }
                .jssorb03 div { background-position: -5px -4px; }
                .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
                .jssorb03 .av { background-position: -65px -4px; }
                .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }
            </style>
            <!-- bullet navigator container -->
            <div u="navigator" class="jssorb03" style="bottom: 1px; left: 40px;">
                <!-- bullet navigator item prototype -->
                <div u="prototype"><div u="numbertemplate"></div></div>
            </div>
            <!--#endregion Bullet Navigator Skin End -->

            <!-- Trigger -->
            <script>
                jssor_slider2_starter('slider2_container');
            </script>
        </div>
        <!-- Jssor Slider End -->                
            <div id="preco" class="prod_price">
                <span style="">
                R$ <?php echo $res['preco']; ?>
                </span>
            </div>                        

            <div id="carrinho" class=""><br />
                <a href="prod_carrinho.php?acao=add&codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative;top:50%;transform:translateY(-50%); "width="20" src="img/carrinho.png" title="Por no Carrinho" />
                </a>
            </div>                        
                        <hr id="linha1" />
                        <hr id="linha2" />
        </div>
    <?php
    }
    ?>

    </div>

A finalidade é ao acessar a página gostaria que aparecesse 9 produtos aleatórios. Para isso achei que somente dando um WHILE no código php funcionaria, mas puro engano, pois somente consigo dar loop nos arquivos que estão na tabela produtos, mas não consigo fazer com que o script funcione.

Estou anexando abaixo os endereços para que os amigos possam dar uma analisada e me dizer o que esta faltando ou como posso faze-lo funcionar.

Página com o Problema - http://lccinformatica.com.br/prod_index.php

Funcionando com o script sem o WHILE do PHP - http://lccinformatica.com.br/prod.php

Espero ter conseguido me expressar ao modo que os amigos possam entender a minha necessidade.

Abraços à todos e no aguardo se possível de respostas positivas.

0

2 Respostas 2

0

Guarda o resultado numa array depois podes percorrer a mesma em Javascript Exemplo

var array = <?php echo json_encode($array) ?>;

var limit = 9;
    for (var i = 0; i < limit; i++) {
        alert(array[i]);
        //Do something
    }
6
  • Badspeed, me desculpe mas sou muito leigo em JavaScript...Onde entro com esse código, no início do código existente? Commented 16/03/2016 às 12:54
  • Editei a resposta para uma melhor compreensão. Isto tudo dentro de um <script>
    – Query
    Commented 16/03/2016 às 14:11
  • Desse jeito Badspeed: <script> var array = <?php echo json_encode($array) ?>; var limit = 9; for (var i = 0; i < limit; i++) { alert(array[i]); //Do something } jssor_slider2_starter = function (containerId) { var options = { $DragOrientation: 3, $BulletNavigatorOptions: { $Class: $JssorBulletNavigator$, $ChanceToShow: 2, $ActionMode: 1, $AutoCenter: 0, $Steps: 1, $Lanes: 1, $SpacingX: 0, $SpacingY: 0, $Orientation: 1 }}; var jssor_slider2 = new $JssorSlider$(containerId, options); } </script>. Mas não funcionou... Commented 16/03/2016 às 14:52
  • O que significa esse PHP? <?php echo json_encode($array) ?>; Commented 16/03/2016 às 14:53
  • Essas variáveis são apenas placeholders, tens que adaptar as tuas necessidades. json_encode($array) transforma a tua array em Json que por sua vez vai ser um objeto em javascript que podes percorrer a vontade. Depois podes utilizar o var.key para renderizar os objetos onde quiseres na pagina recorrendo a jQuery ou javascript puro. PHP nao é o meu forte, não poderei ir mais além do que isto.
    – Query
    Commented 16/03/2016 às 14:55
0

Consegui resolver o problema!!!

A solução foi iniciar o loop antes do Script, inserir o código de cada produto cadastrado na tabela produtos na linha do script referente ao mesmo, na _container" e lá no final do código passei o segundo script para dentro do Loop com o código dos produtos inserido nele tambem, ficando assim o código:

<?php
include "conexao.php";
$codigo = $_POST['codigo'];
$img01 = $_POST['img01'];
$img02 = $_POST['img02'];
$img03 = $_POST['img03'];
$img04 = $_POST['img04'];
$titulo = $_POST['titulo'];
$preco = $_POST['preco'];
$query = mysql_query("SELECT * FROM produto ORDER BY RAND() LIMIT 9");

while($res = mysql_fetch_array($query)){
?>
<script>
jssor_slider<?php echo $res['codigo']; ?>_starter = function (containerId) {
var options = {
$DragOrientation: 3,
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$ActionMode: 1,
$AutoCenter: 0,
$Steps: 1,
$Lanes: 1,
$SpacingX: 0,
$SpacingY: 0,
$Orientation: 1
}
};
var jssor_slider<?php echo $res['codigo']; ?> = new $JssorSlider$(containerId, options);
};
</script>

<div style="background-color:<?php echo $res['fundosite_cor']; ?>;; padding:11px;" class="center_prod_box">

        <div id="titulo" class="product_title">
            <?php echo $res['titulo']; ?>
        </div>
    <!-- Jssor Slider Begin -->
    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 

    <div id="slider<?php echo $res['codigo']; ?>_container" style="position: relative; top: 0px; left: 0px; width: 173px;
        height: 173px; background-color:<?php echo $res['fundosite_cor']; ?>;">

        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div u="slides" style="background-color:<?php echo $res['fundosite_cor']; ?>;cursor: move; position: absolute; left: 0px; top: 2px; height:150px; width:173px; text-align:center;
            overflow: hidden;">
            <div>
                <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img01']; ?>" />
                </a>
            </div>
            <div>
                <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img02']; ?>" />
                </a>
            </div>
            <div>
                <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img03']; ?>" />
                </a>
            </div>
            <div>
                <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img04']; ?>" />
                </a>
            </div>
        </div>

        <!--#region Bullet Navigator Skin Begin -->
        <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
        <style>
            /* jssor slider bullet navigator skin 03 css */
            /*
            .jssorb03 div           (normal)
            .jssorb03 div:hover     (normal mouseover)
            .jssorb03 .av           (active)
            .jssorb03 .av:hover     (active mouseover)
            .jssorb03 .dn           (mousedown)
            */
            .jssorb03 {
                position: absolute;
            }
            .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
                position: absolute;
                /* size of bullet elment */
                width: 21px;
                height: 21px;
                text-align: center;
                line-height: 21px;
                color: white;
                font-size: 12px;
                background: url(img/b03.png) no-repeat;
                overflow: hidden;
                cursor: pointer;
            }
            .jssorb03 div { background-position: -5px -4px; }
            .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
            .jssorb03 .av { background-position: -65px -4px; }
            .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }
        </style>
        <!-- bullet navigator container -->
        <div u="navigator" class="jssorb03" style="bottom: 1px; left: 40px;">
            <!-- bullet navigator item prototype -->
            <div u="prototype"><div u="numbertemplate"></div></div>
        </div>
        <!--#endregion Bullet Navigator Skin End -->

        <!-- Trigger -->
    </div>
    <!-- Jssor Slider End -->                
        <div id="preco" class="prod_price">
            <span style="">
            R$ <?php echo $res['preco']; ?>
            </span>
        </div>                        

        <div id="carrinho" class=""><br />
            <a href="prod_carrinho.php?acao=add&codigo=<?php echo $res['codigo']; ?>">
                <img style="position:relative;top:50%;transform:translateY(-50%); "width="20" src="img/carrinho.png" title="Por no Carrinho" />
            </a>
        </div>                        
                    <hr id="linha1" />
                    <hr id="linha2" />
    </div>

        <script>
           jssor_slider<?php echo $res['codigo']; ?>_starter('slider<?php echo $res['codigo']; ?>_container');
        </script>

<?php
}
?>

</div>

Endereço para verificar o resultado - http://lccinformatica.com.br/prod_index.php

Espero que esse post venha ajudar a outros usuários com o mesmo problema.

Agradeço a atenção, e grande abraço à todos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .