<div class="col-sm-6 col-lg-3 col-md-3">
<div style="border:1px solid #ccc; border-radius:5px; padding:16px; margin-bottom:16px; height:250px;">
<img src="'.$row['college_image'].'" alt="" class="img-responsive" >
<p align="center"><strong>'. $row['product_name'] .'</strong></p>
<h4 style="text-align:center;" class="text-danger" >'.$row['search_link'].'</h4>
</div>
</div>
I want to make above img tag as clickable link
Thanks
<div class="col-sm-6 col-lg-3 col-md-3">
<div style="border:1px solid #ccc; border-radius:5px; padding:16px; margin-bottom:16px; height:250px;">
<!--- MAGIC --->
<a href="<YOUR_URL_FROM_DATABASE">
<img src="'.$row['college_image'].'" alt="" class="img-responsive" >
</a>
<!--- /MAGIC --->
<p align="center"><strong>'. $row['product_name'] .'</strong></p>
<h4 style="text-align:center;" class="text-danger" >'.$row['search_link'].'</h4>
</div>
</div>
Related
I use PHP code to insert some elements in another PHP file, when the elements were originally created inside the calling PHP file style worked just fine, but when i replaced the code with an 'include(somephpfile.php)', elements were added the way i wanted them to but style didnt apply.
style doesn't apply to elements created this way:
echo '<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms" style="box-shadow: 0px 10px 12px grey; width:80%">
<div class="img-wrapper">
<img src="booksCovers/';
$queryImage = "SELECT cover from books where bookno = '$temp';";
$resultsImage = mysqli_query($db, $queryImage);
$imagesrc = mysqli_fetch_array($resultsImage);
echo $imagesrc[0];
echo '" class="img-responsive" alt="this is a title" style="width : 450px ; height :320px; " />
<div class="mybooks-overlay">
<div class="desc">
<div class="description">';
$query2 = "SELECT description FROM books WHERE bookno = '$temp';";
$results = mysqli_query($db, $query2);
$book = mysqli_fetch_array($results);
echo $book[0];
echo '
</div>
<a class="details" target="_blank " href=" #">Learn More</a>
</div>
</div>
</div>
<figcaption>
<button class="myButtone">
<div class="insider"> </div>
20. 00$
</button>
<div class="heart"></div>
</figcaption>
</div>
</div>';
but it applied when it was done this way:
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
<div class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms" style="box-shadow: 0px 10px 12px grey; width:80%">
<div class="img-wrapper">
<img src="booksCovers/" class="img-responsive" alt="this is a title" style="width : 450px ; height :320px; " />
<div class="mybooks-overlay">
<div class="desc">
<div class="description">
</div>
</div>
</div>
</div>
<figcaption>
<button class="myButtone">
<div class="insider"> </div>
20. 00$
</button>
<div class="heart"></div>
</figcaption>
</div>
</div>
I want to get the information from this formwhen you press the add to cart button. and i want to use that information in a cart page.
<?php
$result = mysqli_query($conn,$query);
$output = '';
while($row = mysqli_fetch_assoc($result)) {
$output .= '
<div style="margin-bottom: 20px;" class="col-lg-3 col-md-6 col-sm-6">
<form method="post ">
<div style="height: 400px;" class="card shadow text-center">
<div class="card-block shop-item">
<img class="shop-item-image" src="Bilder/clothes/'. $row['ProductImage'].'" alt="" class="img-fluid" style="height: 200px;">
<div class="card-text shop-item-title">
'.$row['Brand'].'
</div>
<div class="card-text">
'.$row['Quantity'].' in stock
</div>
<div class="shop-item-details">
<div class="card-text" shop-item-price>
<h3>£ '.$row['Price'].'</h3>
</div>
<input style="width: 80%; margin-left: 10%; " type="text" name="quantity" class="form-control" value="1"/>
<button style="margin-top: 10px; margin-bottom: 10px; background-color:#FB8122; border: none; color:black;"href="#" class="shop-item-button btn btn-primary ">Add to cart <span class="fas fa-cart-arrow-down"></span></button>
</div>
</div>
</div>
</form>
</div>;';
}
echo $output;
}
?>
First time asking so sorry if I did something wrong
How do I hide the image tag if there is no image present? Basically, I have an image gallery that has 4 images that can be set. However, if a product has 2 images how do I hide the other 2 image tags? What would be the best method to use?
<img src="/images/large/<?=$prod_id?>.jpg" onclick="openModal();currentSlide(1)" style="border: 1px solid #cccccc;" class="hover-single"/>
<div class="row">
<p style="text-align:center;">Click on image to enlarge</p>
<div class="column">
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:80px; height:80px;" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides" style="display: block;">
<div class="numbertext">1 / 4</div>
<img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">2 / 4</div>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">3 / 4</div>
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">4 / 4</div>
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<a class="prev" onclick="plusSlides(-1)"><</a>
<a class="next" onclick="plusSlides(1)">></a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="gallery cursor active" src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(3)">
</div>
<div class="column">
<img class="gallery cursor" src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%;" onclick="currentSlide(4)">
</div>
</div>
</div>
Your modal-content code can be rewritten as below:
check if the image file exists or not
display the slide if the image file exists, do nothing if not.
for($i = 1; $i<=4; $i++) {
$img_file = '/images/large'.$i.'/'.$prod_id.'.jpg';
if(file_exists($img_file)) {
$display = ($i == 1) ? ' block' : ' none';
echo '<div class="mySlides" style="display:'.$display.';">';
echo ' <div class="numbertext">'.$i.' / 4</div>';
echo ' <img src="'.$img_file.'" style="width:95%; height:95%; margin-left: 2.5%;">';
echo '</div>';
}
}
The above code can be used to replace the following code section:
<div class="mySlides" style="display: block;">
<div class="numbertext">1 / 4</div>
<img src="/images/large1/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">2 / 4</div>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">3 / 4</div>
<img src="/images/large3/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<div class="mySlides" style="display: none;">
<div class="numbertext">4 / 4</div>
<img src="/images/large4/<?=$prod_id?>.jpg" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
Sure it is not the best way to check file_exists each time. This can be improved by means of storing the number of images for each product in your data set / database. Then just set a new variable such as $img_num to replace the 4 in the loop.
Try this code:
<div class="row">
<p style="text-align:center;">Click on image to enlarge</p>
<div class="column">
<?php if(file_exists('/images/large2/'.$prod_id.'.jpg')){<?php>
<img src="/images/large2/<?=$prod_id?>.jpg" style="width:80px; height:80px; border-right: 1px solid #cccccc; padding-right: 5px;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"><?php }
</php>
Here is possible idea for your requirement :
$query = "here is your query";
$res = "your query executed";
$imagearray = array();
$i = 0;
while($row = mysql_fetch_array($res))
{
if(file_exists(imagepath.$row["image"]))
{
$imagearray[$i] = $row["image"];
$i++
}
}
Hi their Brother ild flue did a good work, but we can enhance the code a bit more but making the fetching a bit more dynamic, I propose the code below,
scan the dir for existing folders(in that way u don't need to depend
on the arbitrary number to indicate the folder
see that those paths with ur image exist or not
display the specified images and let the rest of the be discarded.
<div id="myModal" class="modal" style="display: block;">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<?php
$k=1;
$dirs = array_filter(glob('images/*'), 'is_dir');
foreach ( $dirs as $allLargeDir ){
$imgPath=$allLargeDir."/".$prod_id.".jpg";
if(file_exists($imgPath)){
?>
<div class="mySlides" style="display: block;">
<div class="numbertext"><?php echo $k++." / ".$n; ?></div>
<img src="<?php echo $imgPath;?>" style="width:95%; height:95%; margin-left: 2.5%;">
</div>
<?php
}
}
?>
Ok so Im designing this webpage that has a music library. on the library its just the cd/album cover and a play button under it to get the music to play in the music player.
What I want to do is make the album cover a link to open a modal with the album covers and table with the list of the songs and options to links where to stream the albums at ie Spotify APple music etc....
But I do not want to include the Modal script(html codes) on the page with the album covers.Just so its not so cluttered and to keep the coding neat when someone inspects the page? Is there a way I can put all the modal's on a seperate html or php page and use php echo or #import the modals contents from another page.
The Class (Ajax pop up links)is the modal, but it just loads html pages... can i make one page with all the modals on it and include or import or echo the file so the modal will still open without the html for the bootstrap modal having to be on the same page?
<div class="container-fluid">
<hr><div class="innerMenu container col-xs-6 col-sm-6 col-md-6" style="background-color: DarkGrey; border-radius:15px; padding:2px; opacity:1.0;">
<b><a id="all" href="#"><button type="button" class="blk button">All</button></a>
<a id="mixtapes" href="#"><button type="button" class="blk button">Mixtapes</button></a>
<a id="albums" href="#"><button type="button" class="blk button">Albums</button></a>
<a id="singles" href="#"><button type="button" class="blk button">Singles</button></a></div><div class="container col-xs-6 col-sm-6 col-md-6">
<h4><b><font size="+4" color="orange" >Music Library</font></b></h4></div>
<br><br>
<div class="container-fluid">
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
<div class="well col-xs-6 col-sm-4 col-md-4 videos item" style="border-radius:20px; border-width:2px; border-color: white; padding:3px !important; background-color: rgba(0,0,0,0.6);">
<div class="albumArt" style="align-content:center stretch" >
<img src="../images/mediumcdcover.jpg" class="img-responsive" style="border-radius:25px">
</div>
</div>
if you are using php for the main page, you can put all the html for the modal in its own page (saved in the "includes" folder) and then include it in the php code on the main page. You could then use AJAX to load the correct data into a div in the modal body.
<?php
$cd_detailsModal = "includes/cd_detailsModal.html";
include($cd_detailsModal);
?>
I use the following code:
.contain {
max-width: 960px;
text-align: center;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" style="width:100; height:60px;margin-right: 124px;" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" style="width:100; height:100px;margin-right:124px;" />
</div>
<div align="center" class="category">
<img src="img/user.png" style="width:100; height:100px" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;margin-left:58px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
I am unable to display three images in one rows and in second row next three images.
but i got the images in one rows. so there is any possibility to show images like as in one
row 1 2 3 and second row 4 5 6 images.
Thanks and regards
Add clear: left; to .category:nth-child(4)
JSFiddle - DEMO
.category:nth-child(4) {
clear: left;
}
The clear CSS property specifies whether an element can be next to
floating elements that precede it or must be moved down (cleared)
below them. - by Mozilla MDN
The easiest way would be to have one div for each row and each div having just those 3 images inside them.
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" />
<img src="img/driver_icon.jpg" />
<img src="img/user.png" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
<img src="img/abuse.jpg" />
<img src="img/abuse.jpg" />
</div>
See it here: http://jsfiddle.net/vj4kLdjh/1/
A slightly better approach would be to wrap each row into another div what would have display set to block (default) and the inside divs should either lose the float, or you need to add a clear:both element to the end of each row.
<div class="row>
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" />
</div>
<div align="center" class="category">
<img src="img/user.png" />
</div>
</div>
<div class="row>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" />
</div>
</div>
See it here: http://jsfiddle.net/vj4kLdjh/2/
I've marked the rows with a red border in both cases. I've also removed the inline styling in my answer, and I suggest you do the same in your code. Define classes for those elements and avoid inline styling whenever possible.
This will do exactly what you need - 2 rows containing 3 pictures each to 960px (Which you can of course modify). Don't forget that the child element (category) is width + padding(x2) for actual width - in this case, 320px each.
CSS:
div.contain {
width:960px;
}
# Each div takes 320px (times 3 is 960px)
div.category {
display: inline-block;
padding:5px;
width: 310px;
}
Then
<div class="contain">
<div class="category"># image 1</div>
<div class="category"># image 2</div>
<div class="category"># image 3</div>
</div>
<div class="contain">
<div class="category"># image 4</div>
<div class="category"># image 5</div>
<div class="category"># image 6</div>
</div>
You have to add a wrapper div to each row as:
.row_wrap {
width: 100%;
display: inline-block;
}
.contain {
max-width: 960px;
text-align: center;
}
.category {
position: relative;
display: inline-block;
float: left;
padding: 10px;
}
<div class="row_wrap">
<div align="center" class="category">
<img src="img/Tariffs-Booking-Icon.png" style="width:100; height:60px;margin-right: 124px;" />
</div>
<div align="center" class="category">
<img src="img/driver_icon.jpg" style="width:100; height:100px;margin-right:124px;" />
</div>
<div align="center" class="category">
<img src="img/user.png" style="width:100; height:100px" />
</div>
</div>
<div class="row_wrap">
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;margin-left:58px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
<div align="center" class="category">
<img src="img/abuse.jpg" style="width:100; height:100px;" />
</div>
</div>
Hope this helps
div{
width: 400px;
}
div>img{
width: 100px;
float: left;
}
div>img:nth-child(3n+1){
clear: left;
}
<div>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
<img src="1.jpg"/>
</div>