How to make dynamic slideshow using php, mysql, css and html? - php

I wanna make dynamic slideshow with css and HTML. Image will be took by id from tb_image.
id int
image_name varchar (100)
image_path (100)
How to make dynamic slideshow using php, mysql, css and html?
or Can get image by id?
include "connnection.php";
$result = mysql_query("select * from slider");
?>
<div class="accordian">
<?php
$i=1;
while($row = mysql_fetch_array($result)){
?>
<ul>
<li>
<div class="image_title">
</div>
<a href="#">
<img src="../img/<?php echo $i;?>.jpg" alt="" width="640" border="320"/> //I tried use this codes but it's error
</a>
</li>
<li>
<div class="image_title">
Slide 2
</div>
<a href="#">
<img src="img/<?php echo $_GET['id']=2;?>.jpg" alt="" width="640" border="320"/>
</a>
</li>
<li>
<div class="image_title">
Slide 3
</div>
<a href="#">
<img src="img/3.jpg"/>
</a>
</li>
<li>
<div class="image_title">
Slide 4
</div>
<a href="#">
<img src="img/4.jpg"/>
</a>
</li>
<li>
<div class="image_title">
Slide 5
</div>
<a href="#">
<img src="img/5.jpg"/>
</a>
</li>
</ul>
<?php } ?>

Not knowing exactly what you get back from your query, here's a guess:
Replace any of your <img>s with
<img src="../img/<?php echo $row['id']?>.jpg" alt="" width="640" border="320"/>
To "debug" your data, you can replace your while loop with
while($row = mysql_fetch_array($result)){
print_r($row);
}
This will print out any data found in each row.
You might also want to replace the deprecated mysql_* functions with mysqli or PDO.

Related

Div class inside echo PHP

I try to put div class in the echo but it does not work really well. The coding is for to change the login button to the username button after user login. The username button will have the drop-down which is the div class. Other things are work well in this coding except for the div class drop-down. Is there another way to put the div class in the echo? Any thought??
This is before login
What I expected after Login
What I get after Login
Below is my coding:
<div class="header-right">
<?php
if (isset($_SESSION['login_user'])) {
echo '<a class="active" ><img src="image/user.png" width="22" height="22"> '.$login_session.' <img src="image/drop.png" width="20" height="20" > </a>';
echo '<div class="box dropdown">
<ul>
<a "">edit</a>
<a "">delete</a>
<a id="logout" href="logout.php">Log Out</a>
</ul>
</div>';
} else {
echo '<a class="active" href="login.php"><img src="image/lock.png" width="20" height="20"> Login</a>' ;
}
?>
</div>
I use another way to write down this. Let me know if you have any question. I fixed some attribute missing into your anchors <a> and list some <li> elements into your <ul> element as well.
<div class="header-right">
<?php if (isset($_SESSION['login_user'])) { ?>
<a class="active" >
<img src="image/user.png" width="22" height="22">
<?= $login_session ?>
<img src="image/drop.png" width="20" height="20" >
</a>
<div class="box dropdown">
<ul>
<li>edit</li>
<li>delete</li>
<li><a id="logout" href="logout.php">Log Out</a></li>
</ul>
</div>
<?php } else { ?>
<a class="active" href="login.php"><img src="image/lock.png" width="20" height="20"> Login</a>
<?php } ?>
</div>
You may put your code in the way like below and I found out your <ul> is missing <li>.
<div class="header-right">
<?php if(isset($_SESSION['login_user'])): ?>
<!-- Login User (HTML) -->
<?php else: ?>
<!-- Not Login User (HTML) -->
<?php endif; ?>
</div>
<?php if (isset($_SESSION['login_user'])) { ?>
<a class="active" >
<img src="image/user.png" width="22" height="22">
<?php $login_session ?>
<img src="image/drop.png" width="20" height="20" >
</a>
<div class="box dropdown">
<ul>
<li>edit</li>
<li>delete</li>
<li><a id="logout" href="logout.php">Log Out</a></li>
</ul>
</div>
<?php } else { ?>
<a class="active" href="login.php"><img src="image/lock.png" width="20" height="20"> Login</a>
<?php } ?>
</div>

how to set html layout in loop

I want to set a html layout view in a loop for multiple categories. My html code is here...there were many of categories came from (wp-admin) woocommerce. Given code is layout of how to show my categories in home.php so i want to add more categories in home.php through loop.Thanks
My html code is So far...
<div class="selected-products-wrapper clearfix">
<div class="category-list">
<span class="category-main" style="background-color: #5D973E">
<div class="category-main_logo">
<img src="" alt="" class="v-middle"></div>
<span class="category-main-title">
<a href="<?php
echo get_term_link($cat->slug, 'product_cat');
?>">
<?php echo $cat->name; ?></a></span>
<div class="category-main-yakataheader"><img src=""></div>
</span>
<ul class="sub-category-list">
<li><?php echo $sub_category ->name; ?></li>
</ul>
View all
</div>
<div class="images-list">
<a href="" class="large-img">
<img src="" alt="Confectionery"
class="v-middle lazy-img" height="351" width="290">
</a>
<span class="small-img-block">
<a href="">
<img src="" alt="Fruits & Veggies"
class="v-middle lazy-img" height="175" width="171">
</a>
<a href="">
<img src="" alt="Noodles"
class="v-middle lazy-img" height="175" width="171">
</a>
</span>
<span class="center_img-block">
<a href="">
<img src="" alt="Oats"
class="v-middle lazy-img" height="175" width="344">
</a>
<a href="">
<img src="" alt="Ofada"
class="v-middle lazy-img" height="175" width="344">
</a>
</span>
<span class="small-img-block last-img-block">
<a href="">
<img src="" alt="Cooking Oils"
class="v-middle lazy-img" height="175" width="171">
</a>
<a href="">
<img src="" alt="Seasoning"
class="v-middle lazy-img" height="175" width="171">
</a>
</span>
</div>
<div class="alt-images-block">
Fruits & Veggies
Noodles
Cooking Oils
Seasoning
</div>
</div>
you need to create a custom php function with the data you want repeat.
e.g.
<?php
function repeat_category(){ ?>
//your html code you want to repeat goes here.
<?php } ?>
Then you can just use
<?php
repeat_category();
?>
Wherever you want your html code to appear.

Boostrap thumbnail slider load dynamic conent

I have a thumbnail slider on index page
<div class="productslider carousel slide data-slider" id="prod158">
<div class="carousel-inner">
<div class="item active">
<ul>
<li class="product col-sm-2">
<a href="#" alt="">
<img src="#" width="160" height="120" alt="loading">
<span>Title</span>
</a>
<span class="text">Price</span>
</li>
</ul>
</div>
<a data-slide="prev" href="#prod158" class="left carousel-control">
<span class="prev_btn"></span>
</a>
<a data-slide="next" href="#prod158" class="right carousel-control">
<span class="next_btn"></span>
</a>
</div>
So how do I load dynamic data on this slider (where & how i pleased foreach loop).
Note :
This is a laravel project.if you use blade syntax,then i will more helpful.
li should be looped five times.
if there is 10 products then item class should be looped 2 times.
Data Source : Product::all();
<div class="productslider carousel slide data-slider" id="prod158">
<div class="carousel-inner">
#foreach(array_chunk($products,5) as $row)
<div class="item active">
<ul>
#foreach($row as $product)
<li class="product col-sm-2">
<a href="#" alt="">
<img src="#" width="160" height="120" alt="loading">
<span>Title</span>
</a>
<span class="text">Price</span>
</li>
#endforeach
</ul>
</div>
#endforeach
<a data-slide="prev" href="#prod158" class="left carousel-control">
<span class="prev_btn"></span></a>
<a data-slide="next" href="#prod158" class="right carousel-control">
<span class="next_btn"></span></a>

Displaying distinct data from database

I want PHP code for displaying data from database and I want to add a specific class to first <li> .
Below are the statc form of it, but I want it dynamically from my MySQL database.
<ul class="photo">
<li class="first"><img src="images/image1.jpg" alt="" /></li> //only this first line will be giving attribute (class="first")
<li><img src="images/image2.jpg" alt="" /></li>
<li><img src="images/image3.jpg" alt="" /></li>
</ul>
<ul class="text">
<li class="first">
<h2>Image 1 caption</h2>
<p>Story............</p>
<a class="next" href="">Next>></a>
</li>
<li> // this is the caption for the line that will be giving attribute (class="first")
<h2>Image 2 caption</h2>
<p>Stories 2.................</p>
<a class="next" href="">Next>></a>
</li>
<li>
<h2>Image 3 caption</h2>
<p>image 3 story................</p>
<a class="next" href="">Next>></a>
</li>
</ul>
Assuming you hava an array of data from the DB:
<?php
$first = true;
foreach ($array as $item)
{
?>
<li <?php if ($first) { echo "class='first'"; $first = false; } ?>>
<h2><?php echo $item["someheader"]; ?></h2>
</li>
<?php
}
?>
This will loop through all the rows from the db, and assign the first class only to the first row in the list.

How to integrate PHP code into HTML Carousel code?

Can anybody help with the below please. Im having a bit of difficulty getting my head around how to get it to work.
The code is for a thumbnail carousel.
Here is the HTML
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three">
</div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four">
</div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five">
</div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six">
</div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--thumbnails-->
<div class="row hidden-xs" id="slider-thumbs">
<ul class="hide-bullets">
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/170x100&text=one">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-1">
<img src="http://placehold.it/170x100&text=two">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-2">
<img src="http://placehold.it/170x100&text=three">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-3">
<img src="http://placehold.it/170x100&text=four">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-4">
<img src="http://placehold.it/170x100&text=five">
</a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-5">
<img src="http://placehold.it/170x100&text=six">
</a>
</li>
</ul>
</div>
The above code works fine, however I am trying to integrate the below PHP code so that the slider has dynamic images with thumbnails.
Here is the PHP code to display the images:
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $image) {
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
}
}
?>
If anyone could help or point me in the right direction, it would be appreciated!
Try this. Note where code starts and ends i didn't copy all of your block:
<div class="carousel-inner">
<?php
if ($images = get_field('images', $design_id)) {
foreach ($images as $key => $image) {
$active = $key == 0 ? 'active' : '';
echo '<div class="<?php echo $active;?> item" data-slide-number="<?php echo $key; ?>">';
echo '<img src="' . $image['image']['sizes']['large'] . '" />';
echo '</div>'; }
}
?>
</div>
Explanation. Showing the images is not only to print img src=..., so you have to see what html block to put in the foreach loop so it be showed as the html you posted. $key is the index that you need to mark the slides. $active shows which slide is active, so you need to set it only ones (in our case when $key is 0)
Cheers.

Categories