Javascript loop help

1

Hello, I have this code below:

        <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>

The purpose is to access the page you would like 9 random products (Currently I have only 2 products listed). For this I thought that only giving a WHILE in the php code would work, but pure deception, because I can only loop the files that are in the products table, but I can not get the script to work on the second product listed.

I'm not sure how to get the script to repeat itself (LOOP). I have already researched some posters even in W3schools , but I was unable to apply the logic in my script, perhaps because I was very lazy in JavaScript.

I am attaching the access address below so that friends can give a review and tell me what is missing or how can I make it work.

Problem page - link

I hope I have been able to express myself so that friends can understand my need.

Hugs to all and awaiting positive responses if possible.

    
asked by anonymous 17.03.2016 / 14:14

2 answers

2

Murilo Cabral, the loop is made in PHP and mounted in HTML with PHP itself, correct? After said you want to do what with Javascript that is not happening? Note: Accessing the link with the firebug open I see that it can not find Jquery

  

"NetworkError: 404 Not Found - link "

    
17.03.2016 / 14:32
1

I was able to solve the problem!

The solution was to start the loop before the Script, insert the code of each product registered in the products table in the line of the script referring to it, in the _container "and there at the end of the code I passed the second script into the Loop with the code of the products inserted in it also, thus getting the code:

        <?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>

Address to check the result - link

I hope this post will help other users with the same problem.

Thank you for your attention, and a big hug to everyone.

    
18.03.2016 / 03:06