1

Olá, estou com esse código abaixo:

        <div class="" style="background:<?php echo $res['fundosite_cor']; ?>; width:588px; float:left;">
        <script>
            jssor_slider20_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_slider20 = new $JssorSlider$(containerId, options);
            };
        </script>
    <?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>
        <!-- Jssor Slider Begin -->
        <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
        <div id="slider20_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>
    <?php
    }
    ?>

    </div>
            <script>
                jssor_slider20_starter('slider20_container');
            </script>
    </div>

A finalidade é ao acessar a página gostaria que aparecesse 9 produtos aleatórios (No momento tenho apenas 02 produtos listados). 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 no segundo produto listado.

Não estou sabendo fazer com que o script se repita (LOOP). Já pesquisei alguns poster ate mesmo no W3schools, mas não consegui aplicar a logica em meu script, talvez por ser muito leigo em JavaScript.

Estou anexando abaixo o endereço de acesso 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

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.

2 Respostas 2

2

Murilo Cabral, o loop e feito em PHP e montado no HTML com o próprio PHP, correto? Depois disse você deseja fazer o que com o Javascript que não esta acontecendo? Obs.: Acessando o link com o firebug aberto vejo que ele não esta conseguindo achar o Jquery

"NetworkError: 404 Not Found - http://lccinformatica.com.br/js/jquery-1.12.1.min.js"

2
  • OK Henrique, realmente eu não tinha enviado via FTP o JQuery "jquery-1.12.1.min.js", mas acabei de enviar. Vamos lá, quando entro na página prod_index.php, ele manda o primeiro produto corretamente, ou seja funcionando. Porém no produto seguinte, me parece que ele não aplica a função do JavaScript, que faz com que eu possa passar as imagens via botões enumerados e não esta criando o carrossel das imagens como no primeiro. Mas o loop do php com o while esta funcionando pois esta trazendo os dados do BD referente a cada produto listado. Me parece que ele não esta dando continuidade no script. Commented 17/03/2016 às 15:46
  • Na verdade eu não estou sabendo é criar ou montar o loop, seja ele em PHP ou em JavaScript... HEEELLLPPPP... preciso de ajuda... HEEELLLPPP... Rsrsrsrs... Commented 17/03/2016 às 16:12
1

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 .