i'm creating a simple bootstrap gallery thumbnail with images that are being called from database. I succeed in calling all the info, but now i'm struggling with getting the id of each image. This is my code:
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
And this is my function in javascript:
function getID(e)
{
var x = e.src;
alert(x);
}
But it is not working, how do I get the id of each image if is being called from a database?
Why don't you get in the same way you wrote?
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
function getID(id)
{
alert(id);
}
function getID(obj){
if(obj instanceof HTMLElement) {
alert(obj.getAttribute("data-target-id"));
}
else {
alert(obj);
}
}
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
<div class="caption">
<h3>Example 1</h3>
<p>Using data-* attribute</p>
<p>Button</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
<div class="caption">
<h3>Example 2</h3>
<p>Passing id directly</p>
<p>Button</p>
</div>
</div>
you can use Attribute tag in a tag and add onclick function to get your id value . i set category-id Attribute and in javascript code use this tag to get value
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
then this is script function
<script>
function getID(obj)
{
alert(obj.getAttribute("category-id"));
}
</script>
or add onclick function and send id in this function
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
<div class="caption">
<h3><?php echo $row['ID_Category']?></h3>
<p><?php echo $row['Categories'] ?></p>
<p>Button Button</p>
</div>
</div>
this is script
<script>
function getID(id)
{
alert(id);
}
</script>
both will work.
Related
I am using Fancyboxapp + Carousel for gallery portfolio. I wanted it adjust the height and responsiveness + add many images in this columns which I couldn't achieve. Have a look in the image
Here is my code:
const mainCarousel = new Carousel(document.querySelector("#mainCarousel"), {
infinite: false,
Navigation: false,
});
.carousel__slide {
width: 100%;
}
.cpad{
margin-bottom: 80px;
}
<div class="container">
<div class="carousel cpad mx-auto" id="mainCarousel">
<div class="carousel__slide">
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/1b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/1.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/2b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/2.png" />
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/3b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/3.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/4b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/4.png" />
</a>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/6b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/6.png" />
</a>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/7b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/7.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/8b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/8.png" />
</a>
</div>
</div>
</div>
<div class="carousel__slide">
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/5.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/6b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/6.png" />
</a>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/7b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/7.png" />
</a>
</div>
<div class="col-sm-6">
<a href="<?php echo BASE_URL; ?>/assets/img/portfolio/website/8b.png" data-fancybox="gallery">
<img src="<?php echo BASE_URL; ?>/assets/img/portfolio/website/8.png" />
</a>
</div>
</div>
</div>
</div>
</div>
code i have written below is working fine but at the end of the looping the div is not closed its still opening a loop
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
$split++;
if ($split % 4 == 0){
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
</div>
The Div has splited very well but in end of the loop div has not been closed. Thats only the problem please provide me the help to sort out the problem
When I inspect the element the last loop will show at the given result as follows:
<div class="col-sm-3">
<div class="col-item">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/1557301934.jpg" alt="User one">
</div>
<div class="info">
<div class="name">UPHOLSTERY</div>
<div class="degination">UPHOLSTERY</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div></div><div class="item"><div class="row">
I want to remove the two opening div's as dynamically. How can i set this to remove opened div's at then end of the looping
You can do this:
<div class="carousel-inner">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="item <?php if($i==1) echo "active";?>">
<div class="row">
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
I am doing a dynamic site. My main page shows a persons profile on the left and the articles written by him on the right.This is my main page.When i click 'read more', that particular article should open up in a new page on the left, and the remaining articles written by the same person should be shown on the right.
But here all the articles are shown This is the image of my blog page. I only want the selected article to be shown on the left and all the remaining articles on the right.
This is my table for articles. In the first page i am calling the articles on the right using the person's id.
This is the code for my first page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from person_details where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="background-color:rgba(125, 178, 194, 0.43); margin-bottom:10px;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<img style="margin:20px;" src="uploads/<?php echo $ar[17]; ?>">
</div>
<div class="col-sm-8 col-md-8 col-lg-8">
<h3><b>Mr. <?php echo $ar[1];?></b></h3>
<h5><?php echo $ar[8];?>, <?php echo $ar[12];?></h5>
<h5><?php echo $ar[2];?>, <?php echo $ar[7];?> years of experience</h5>
<p><?php echo $ar[16];?></p>
</div>
</div>
<div style="margin:20px;">
<h4><b>Services</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[18]; ?></h5>
</li>
</ul>
<h4><b>Specialisations</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[2]; ?></h5>
</li>
</ul>
<h4><b>Education</b></h4>
<hr>
<ul>
<li>
<h5><?php echo $ar[8]; ?> - <?php echo $ar[9]; ?> , <?php echo $ar[10]; ?> , <?php echo $ar[11];?></h5>
</li>
</ul>
<ul>
<li>
<h5><?php echo $ar[12]; ?> - <?php echo $ar[13]; ?> , <?php echo $ar[14]; ?> , <?php echo $ar[15];?></h5>
</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h3>Articles by Mr. <?php echo $ar[1];?></h3><?php } ?>
<hr>
<?php
$sql1="select * from article_tb where id=$q";
$res1=mysql_query($sql1);
while($ar=mysql_fetch_array($res1))
{
$_SESSION['id'] = $q;
?>
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88">
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
<?php } ?></div>
</div>
</div>
and this is the code for my second page:
<div class="container">
<?php
session_start();
$q = $_SESSION['id'];
$con=mysql_connect("localhost","root","");
mysql_select_db("demo_db",$con);
$sql="select * from article_tb where id=$q";
$res=mysql_query($sql);
while($ar=mysql_fetch_array($res))
{
?>
<div>
<div class="row">
<div style="border:1px solid #005212;" class="col-sm-8 col-md-8 col-lg-8">
<div class="row">
<center><img style="margin-top:10px;" src="uploads/<?php echo $ar[3]; ?>" /></center>
<div class="col-sm-12 col-md-12 col-lg-12">
<h4><b><?php echo $ar[1]; ?></b></h4>
<p><?php echo $ar[2]; ?></p>
</div>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<h4><b><?php echo $ar[1]; ?></b></h4>
<div class="row">
<div class="col-sm-6 col-lg-6 col-md-6">
<img src="uploads/<?php echo $ar[3]; ?>" width="170px" height="88" />
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<?php echo $ar[5]; ?>
<form action="blog.php">
<input type="submit" class="btn btn-info" name="read" value="read more" />
</form>
</div>
</div>
<hr>
</div></div></div>
<?php } ?>
Can somebody please help me?
Is there a way to expand all checkout steps in opencat? I want to put all 6 steps in just 2.
<div class="checkout">
<div id="checkout">
<div class="checkout-heading"><?php echo $text_checkout_option; ?></div>
<div class="checkout-content"></div>
</div>
<?php if (!$logged) { ?>
<div id="payment-address">
<div class="checkout-heading"><span><?php echo $text_checkout_account; ?></span></div>
<div class="checkout-content"></div>
</div>
<?php } else { ?>
<div id="payment-address">
<div class="checkout-heading"><span><?php echo $text_checkout_payment_address; ?></span></div>
<div class="checkout-content" style="display: block;"></div>
</div>
<?php } ?>
<?php if ($shipping_required) { ?>
<div id="shipping-address">
<div class="checkout-heading"><?php echo $text_checkout_shipping_address; ?></div>
<div class="checkout-content"></div>
</div>
<div id="shipping-method">
<div class="checkout-heading"><?php echo $text_checkout_shipping_method; ?></div>
<div class="checkout-content"></div>
</div>
<?php } ?>
<div id="payment-method">
<div class="checkout-heading"><?php echo $text_checkout_payment_method; ?></div>
<div class="checkout-content"></div>
</div>
<div id="confirm">
<div class="checkout-heading"><?php echo $text_checkout_confirm; ?></div>
<div class="checkout-content"></div>
</div>
The content is JavaScript generated or something so I can't just add display:"block" to the content divs.
I would like to change my image from this source src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" to this one src="img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg"
on a mouseover witch will allow me to change the image from black and withe to color image.
<div class="row">
<?php foreach ($videos as $video) : ?>
<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img class="img-thumbnail" src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" alt="<?php echo $video->getTitre(); ?>">
<div class="caption">
<h3><?php echo $video->getTitre(); ?></h3>
<p>
<?php echo $video->getAnnee(); ?>
</p>
<p>Button Button</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
Thank in advance for your help, because I only have some background solutions with css, but my php doesn't work in.
Try something like this:
HTML:
<div class="row">
<?php foreach ($videos as $video) : ?>
<div class="col-sm-4 col-md-4">
<div class="thumbnail">
<img onmouseenter='switch(this);' class="img-thumbnail" src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg" alt="<?php echo $video->getTitre(); ?>">
<div class="caption">
<h3><?php echo $video->getTitre(); ?></h3>
<p>
<?php echo $video->getAnnee(); ?>
</p>
<p>Button Button</p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
JS
function switch(obj){
$(obj).attr("src", 'img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg');
}
I found a solution with this code, but it is only doing on the image.
<img
class="img-thumbnail" src="img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg"
alt="<?php echo $video->getTitre(); ?>"
onmouseover="this.src='img/thumbnails/color/<?php echo $video->getImage(); ?>.jpg'"
onmouseout="this.src='img/thumbnails/bw/<?php echo $video->getImage(); ?>.jpg'"
/>
Now I would like to add this code to the Parent Div <div class="col-sm-4 col-md-4"> but I can't make it work.
There are multiple ways to do this
One of which is to have two images, one for the thumbnail image, and one for the mouseover image.
The thumbnail image and the mouseover image are in the exact same spot, but the mouseover image is +1 in the z-index.
//img2 is the mouseover image in this example.
$('#img2').mouseover(function() {
$(this).fadeTo(250, 1);
});
$('#img2').mouseout(function() {
$(this).fadeTo(250, 0);
});
http://jsbin.com/jexonoxutoli/1/edit?html,js,output
Currently I found a solution witch works fine with my code.
$(".thumbnail")
.mouseenter(function(){
var $img = $(this).find("img");
var newSrc = $img.attr("src").replace("/bw/", "/color/");
$img.attr("src", newSrc);
})
.mouseleave(function(){
var $img = $(this).find("img");
var newSrc = $img.attr("src").replace("/color/", "/bw/");
$img.attr("src", newSrc);
});