Storing each image from array into div

Javascript coding ..

Moderators: egami, macek, gesf

Post Reply
partizan
New php-forum User
New php-forum User
Posts: 10
Joined: Sun Mar 25, 2018 10:11 am

Tue Apr 03, 2018 1:27 pm

Hello forum,

Trying to reproduce image slider found on youtube.Here is the original code. I hope i'm posting in right thread

Code: Select all

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<style type="text/css">

body{

font-family: verdana,sans-serif;

margin: 0;

}

.slideshow-container{

width: 800px;

position: relative;

margin: auto;

}

.numbers{

position: absolute;

top: 0;

color: #f2f2f2;

padding: 8px 12px;

font-size: 12px;

}

.myslides{

display: none;

}

.prev , .next{

position: absolute;

top: 50%;

font-size: 18px;

font-weight: bold;

padding: 16px;

margin-top: -22px;

border-radius: 0 3px 3px 0;

color: #fff;

cursor: pointer;

}

.next{

right: 0;

border-radius: 3px 0 0 3px;

}

.prev:hover,.next:hover{

background-color: rgba(0,0,0,0.8);

}

.caption{

text-align: center;

position: absolute;

bottom: 8px;

width: 100%;

color: #f2f2f2;

font-size: 15px;

padding: 8px 22px;

}

.dots{

width: 13px;

height: 13px;

background: gray;

display: inline-block;

border-radius: 50%;

cursor: pointer;

}

.fade{

animation-name:fade;

animation-duration:1.5s;

}

@keyframes fade{

from {opacity: 0.4;}

to {opacity: 1;}

}

.active, .dot:hover {

background-color: #333;

}

</style>

<body>

<div class="slideshow-container">

<div class="myslides fade">

<div class="numbers">1 / 4</div>

<div><img src="slider/1.jpg"></div>

<div class="caption">Text 1</div>

</div>

<div class="myslides fade">

<div class="numbers">2 / 4</div>

<div><img src="slider/2.jpg"></div>

<div class="caption">Text 2</div>

</div>

<div class="myslides fade">

<div class="numbers">3 / 4</div>

<div><img src="slider/3.jpg"></div>

<div class="caption">Text 3</div>

</div>

<div class="myslides fade">

<div class="numbers">4 / 4</div>

<div><img src="slider/4.jpg"></div>

<div class="caption">Text 4</div>

</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<br>

<div style="text-align:center">

<span class="dots" onclick="currentSlide(1)"></span> 

<span class="dots" onclick="currentSlide(2)"></span> 

<span class="dots" onclick="currentSlide(3)"></span> 

<span class="dots" onclick="currentSlide(4)"></span> 

</div>

<script type="text/javascript">

var slideIndex = 1;

showSlide(slideIndex);

function plusSlides(n){

showSlide(slideIndex += n);

}

function currentSlide(n) {

showSlide(slideIndex = n);

}

function showSlide(n){

var i;

var slides = document.getElementsByClassName("myslides");

var dots = document.getElementsByClassName("dots");

if (n > slides.length) { slideIndex = 1};

if (n < 1) { slideIndex = slides.length};

for (i=0;i<slides.length;i++) {

slides[i].style.display = "none";

};

for (i=0;i<dots.length;i++) {

dots[i].className = dots[i].className.replace(" active","");

};

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

}


</script>

</body>

</html>
I want to display images stored in database.Here is what i got

Code: Select all

function getImg(){
    global $con;
    $get_cats="select * from product";
    $run_cats=mysqli_query($con, $get_cats);
    
    while($row_cats=mysqli_fetch_array($run_cats)){
    
        $cat_id=$row_cats['product_id'];
        $cat_image=$row_cats['product_image'];
        echo"
        

        
        <img src='admin_area/product_images/$cat_image'/>
      
        
        ";
    }
    
    }
and my html

Code: Select all

   <div  class="myslides">
            <?php getImg() ?>
            </div>
  

The result is, all images are stacked one under another.The discripency between my code and original code is that each image has a separate div.
My question is how can I generate as many divs with images as there are images in database present in this function <?php getImg() ?>.
Thank you for helping me.

Enache
New php-forum User
New php-forum User
Posts: 7
Joined: Mon Apr 02, 2018 1:19 pm

Tue Apr 03, 2018 1:41 pm

I'm half asleep so I may be misunderstanding your question, but can't you just put put div tags around the img tag in your getImg function?

partizan
New php-forum User
New php-forum User
Posts: 10
Joined: Sun Mar 25, 2018 10:11 am

Wed Apr 04, 2018 3:38 pm

Fantastic. Even half asleep you answered my question.Thank you.

Post Reply