I want to make a product gallery like 5 products, each has their own background-image attribute
I use loop to insert the product image, so I want to make it each loop will have different background-image
I'm thinking of using IF statement like so
<?php
$bg = 0;
$bg1 = "url('img1.jpg')";
$bg2 = "url('img2.jpg')";
$bg3 = "url('img3.jpg')";
$bg4 = "url('img4.jpg')";
$bg5 = "url('img5.jpg')";
if ($bg = 0){
echo " <div style='background-image :$bg1 ;'>" ;
$bg = 1;
} else if ($bg= 1) {
echo " <div style='background-image :$bg2 ;'>" ;
$bg = 2;
} else if ($bg= 2 ) {
echo " <div style='background-image :$bg3 ;'>" ;
$bg = 3;
} else if ($bg= 3 ) {
echo " <div style='background-image :$bg4 ;'>" ;
$bg = 4;
} else if ($bg= 4 ) {
echo " <div style='background-image :$bg5 ;'>" ;
$bg = 0;
}
echo " </div> " ;
code for product images
?>
above is the simplified code I wrote, it doesn't work.
if anyone has a different but much simpler solution it will be appreciated
note : the image files are in the same directory with this php file
thank you
Would you be open to using img tags? This, in my opinion, would be a better solution:
Code:
<?php
$images=Array(
"img1.jpg",
"img2.jpg",
"img3.jpg",
"img4.jpg",
"img5.jpg"
);
//
print "\n<br> Code: \n<pre>\n".RenderThoseImages($images)."\n</pre>";
//
function RenderThoseImages($images)
{
//
$s="";
//
foreach($images as $image){
$s.="\n<div><img src=\"{$image}\"></div>";
}
return $s;
}
?>
Outputs:
<br> Code:
<pre>
<div><img src="img1.jpg"></div>
<div><img src="img2.jpg"></div>
<div><img src="img3.jpg"></div>
<div><img src="img4.jpg"></div>
<div><img src="img5.jpg"></div>
</pre>
The main reason being that when you use the background-image CSS, you're also responsible for grabbing the image dimensions in PHP and rendering height/width into the div CSS as well, or possibly creating some javascript to fix it after loading, creating unneeded headache.
Related
<div id = "listwrapper">
<ul id = "mylist">
<?php
$images = glob("sorted/2017/*.jpg");
$i = 0;
foreach((array_reverse($images)) as $image){
if ($i == 0){
echo "<li>";
}
$i++;
echo'<img id="BR" src="'.$image.'">;
if($i==4){
echo"</li>";
$i = 0;
}
}
?>
</ul>
<div>
The above script works fine and outputs a <li> tag with 4 images in each one. with about 80 images in total.
Now I'm trying to use next() and closest() to display the next <img> in the <li> tag when the image is clicked. or if it is the last <img> in the <li>, then skip to the next <li>? seems like it would be easier to change the script and just put each image in its own <li> tag..
$('#mylist li img').click(function(){
var el = document.getElementById('BR');
var big = document.getElementById('BRBIG');
var img = document.getElementById('mylist li img');
imageClicked = $(this).closest('li');
big.src = imageClicked.find('img').next().next().attr('src');
$('#brbigcon').show('fadein');
$('#BRBIG').show(300);
$('#fs').show(300);
});
Is there someway to implement closest('img') instead of closest ('li')?
Try this:
<div id = "listwrapper">
<ul id = "mylist">
<?php
$images = glob("sorted/2017/*.jpg");
$i = 0;
foreach((array_reverse($images)) as $image){
if ($i == 0){
echo "<li>";
}
$i++;
echo '<img class="BR" src="'.$image.'">';
if($i==4){
echo "</li>";
$i = 0;
}
}
?>
</ul>
<div>
Jquery:
$('#mylist .BR').click(function(){
var src = $(this).attr('src');
var big = $('BRBIG');
big.attr('src', src);
$('#brbigcon').show('fadein');
$('#BRBIG').show(300);
$('#fs').show(300);
});
A piece of advice. In your html, if the amount of images is not a multiple of 4, the last li never gets closed. Here you have another approach to solve it...
<div id = "listwrapper">
<ul id = "mylist">
<?php
// Get the array of image urls.
$images = array_reverse(glob("sorted/2017/*.jpg"));
// Create the html `img` element of each image.
$imgs = array_map(function($v) { return "<img class=\"BR\" src=\"".$v."\">"; },$images);
// Chumk the array in groups of 4 and put each group inside of a `li` element.
$imgsli = array_map(function($v) { return "<li>".implode("",$v)."</li>"; },array_chunk($imgs,4));
// Print all the `li` elements.
echo implode("",$imgsli);
?>
</ul>
<div>
About the jquery, this would be my approach...
$('#mylist li img').click(function() {
var $nextImg;
if ($(this).next('img').length > 0) { // There's more img in current li, get the next one.
$nextImg = $(this).next('img');
}
else {
if ($(this).closest('li').next('li').length > 0) // There's more li's, go to the first image of the next one.
$nextImg = $(this).closest('li').next('li').find('img:first');
else // We are in the last div, go to the first image.
$nextImg = $('ul#mylist li:first img:first');
}
// Now $nextImg is the jQuery object of the right next image. Do what you need to show it.
...
});
With this you get the right next image according to your indications. Just add the code you want to show the image, etc.
I hope it helps
Trying to give 3 different color for div's in loop in php, now its working only two .how can i impliment alternative color for div.? Here what I want.
style
.redBackground { background-color:#F00; }
.blueBackground { background-color:#03F;}
.greenBackground { background-color:#6F3; }
php
<?php
$new= mysql_query("select * from tbl_news");
while ($row=mysql_fetch_array($new))
{
$x++;
$class = ($x%2 == 0)? 'redBackground': 'blueBackground' ;
echo "<tr class='$class'>";
$id = $row['id'];
$news = $row['news'];
?>
<div class="col-md-2 col-sm-12 col-xs-12 news_main_div">
<div class="md-trigger" data-modal="modal-11">
<div <?php echo "<tr class='$class'> ";?>>
<h1 style=" margin-bottom:5px;">
<strong ><?php echo $news ?></strong>
</h1></div></div><?php } ?>
Use color array like below
$color_array = array('whiteBackground', 'grayBackground', 'blueBackground');
$x=0;
while($row=mysql_fetch_array($new)){
$x++;
$class = $color_array[$x%3];
}
And in future, if you want to more color, then simply add color-class in array and change in $color_arrar[$x%n], where n=number_of_color
If you want random color, then use below code
$color_arrar = array('whiteBackground ','grayBackground ','blueBackground ');
$size_of_array = sizeof($color_arrar);
while($row=mysql_fetch_array($new)){
$n = rand(0,$size_of_array-1);
$class = $color_arrar[$n%3];
}
Please try this
if($x%3 == 0)
$class = 'greenBackground';
else if($x%2 == 0 )
$class = 'redBackground';
else
$class = 'blueBackground';
If you need it in random order you can use array_rand function
$color = array("redBackground", "blueBackground", "greenBackground");
$colorValue = array_rand($color, 1);
$class = $color [$colorValue];
I am not sure if it is the sort that isn't working or the way that I am outputting the information. But it would seem that the order that these "li" elements are being made is wrong sometimes.
The images in the folder are named something like
A-Mike-groomsman-topRight-light.jpg
B-James-groomsman-topRight-light.jpg
C-Jared-groomsman-topRight-light.jpg
Code is below. The "li" are in the right order in Firefox, but Chrome and Safari sometimes they put the last one first. Then sometimes they don't. Though I wonder if it could be the bxslider moving things around after the page load? Anyone experience this before?
<?PHP
$titleName = 'who\'s who'; //Wording for title of this section. Change this if you want to change the title text of this section
include 'modules/title.php';
$boydirectory = $_SERVER['DOCUMENT_ROOT']."/resources/images/who/boys";
$girldirectory = $_SERVER['DOCUMENT_ROOT']."/resources/images/who/girls";
$boy_results_array = array();
$girl_results_array = array();
if (is_dir($boydirectory))
{
if ($handle = opendir($boydirectory))
{
foreach(glob($boydirectory.'/*.*') as $file)
{
$boy_results_array[] = basename($file);
}
closedir($handle);
}
}
if (is_dir($girldirectory))
{
if ($handle = opendir($girldirectory))
{
foreach(glob($girldirectory.'/*.*') as $file)
{
$girl_results_array[] = basename($file);
}
closedir($handle);
}
}
sort($boy_results_array);
sort($girl_results_array);
?>
<div class="whoSlider boy">
<h3>Boys</h3>
<ul class="whoBoysbxslider">
<?php
if(count($boy_results_array) > 0){
for ($i = 0; $i < count($boy_results_array); $i++) {
$result = explode('-', $boy_results_array[$i]);
$name = str_replace("_", " ", $result[1]);
$job = str_replace("_", " ", $result[2]);
$alignment = $result[3];
$color = str_replace(".jpg", "", $result[4]);
echo "<li>";
echo "<img src=\"../resources/images/who/boys/$boy_results_array[$i]\" />";
echo "<div class=\"captionContainer $alignment $color\">";
echo "<span>$name</span>";
echo "<span>$job</span>";
echo "</div></li>";
}
}
?>
</ul>
</div>
<div class="whoSlider girl">
<h3>Girls</h3>
<ul class="whoGirlsbxslider">
<?php
if(count($girl_results_array) > 0){
for ($j = 0; $j < count($girl_results_array); $j++) {
$result = explode('-', $girl_results_array[$j]);
$name = str_replace("_", " ", $result[1]);
$job = str_replace("_", " ", $result[2]);
$alignment = $result[3];
$color = str_replace(".jpg", "", $result[4]);
echo "<li>";
echo "<img src=\"../resources/images/who/girls/$girl_results_array[$j]\" />";
echo "<div class=\"captionContainer $alignment $color\">";
echo "<span>$name</span>";
echo "<span>$job</span>";
echo "</div></li>";
}
}
?>
</ul>
</div>
Apparently the issue was not with php but with the BX slider. The issue is it was going to the clone slide instead of the first slide. Only in chrome and Safari. The below link talks about the issue.
https://github.com/stevenwanderski/bxslider-4/issues/154
The solution in there that worked for me was adding this to the jquery.bxslider.css file
.bx-viewport li { min-height: 1px; min-width: 1px; }
try
flush()
after echo() to make sure the content you want to print is sent to the client at that point.
First of all, PHP is a server side language and the behaviour is not effected by the browser.
So I would say that your issue is caused by bxslider which is a jQuery plugin so the behaviour it could be affected by the browser.
To check that you can press ctrl+u in firefox and chrome and see that the html is the same.
I'm trying to display image in 5 by 3 table.
I'm able to display the images if all empty(blank.png).
Here is the code
<?PHP
$ds ='\image';
$imagefile = array("EX_W1_01.png", "EX_W1_02.png", "EX_W2_01.png","EX_W3_01.png");
echo "<pre>"; print_r($imagefile);
$file = 'blank.png';
$d = $ds.$file;
echo "<table border = 1 width=\"540px\" cellspacing=\"0px\" cellpadding=\"0px\">";
for($row=1;$row<=5;$row++){
echo "<tr>";
for($col=1;$col<=3;$col++){
// echo"<td height=60px>W$row</td>";
//if()
echo"<td height=60px>W$row<img border = 1 height = 120 width = 120 src = $d ></td>" .PHP_EOL;
}
echo "</tr>";
}
echo "</table>";
?>
I want to display the images base on middle file name array $imagefile eg W1, W2 and if not in array, I will display the blank.png.
I was able to get the middle file name by this code, but I cannot display the images in correct row/col.
for($i=0;$i<count($imagefile); $i++) {
$wd = substr($imagefile[$i], 3, strpos($imagefile[$i], '_'));
}
Can you try this,
Based on your code add these when you echo the image,
$wd = substr($imagefile[$i], 3, strpos($imagefile[$i], '_'));
if($wd == *the increment either row or col*)
{
echo"<td height=60px>W$row<img border = 1 height = 120 width = 120 src = $d ></td>" .PHP_EOL;
}
else
{
echo"<td height=60px>No image</td>" .PHP_EOL;
}
See if it works.
Here it is
<?php
$ds ='/image';
$imagefile = array("EX_W1_01.png", "EX_W1_02.png", "EX_W2_01.png","EX_W3_01.png");
//echo "<pre>"; print_r($imagefile);
$default = 'blank.png';
?>
<table border = 1 width=\"540px\" cellspacing=\"0px\" cellpadding=\"0px\">
<?php
for($row=1;$row<=5;$row++){
?>
<tr>
<?php
for($col=1;$col<=3;$col++){
// construct the file name
$filename = 'EX_W' . $row . '_0' . $col . '.png';
// set the default image file
$imgPath = $ds . '/' . $default;
// in case the file name exists in your array with images,
// set the correct path to the image
if (in_array($filename, $imagefile)) {
$imgPath = $ds . '/' . $filename;
}
?>
<td height=60px>
<img border="1" height="120" width="120" src="<?php echo $imgPath; ?>"/>
</td>
<?php } ?>
</tr>
<?php
}
?>
</table>
As you can see I also prefer to "embed" the php code in the HTML. It makes no sense to me outputting HTML code through the PHP engine if it can be parsed as is ;-)
Ok, so I'm loading a list of images by directory using PHP:
<?php
# fetch image details
$images = getImages("marc/img/livingrooms/");
# display on page
foreach($images as $img) {
echo "<li><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
}
?>
Then I'm using the Galleria JQuery plugin to style those items into a gallery:
$(document).ready(function(){
$('.dynolist').addClass('gallery_group'); // adds new class name to maintain degradability
$('ul.gallery_group').galleria({
history : true, // activates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable
insert : '#main_image', // the containing selector for our main image
onImage : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
// fade in the image & caption
image.css('display','none').fadeIn(1000);
caption.css('display','none').fadeIn(1000);
// fetch the thumbnail container
var _li = thumb.parents('li');
// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);
// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');
// add a title for the clickable image
image.attr('title','Next image >>');
},
onThumb : function(thumb) { // thumbnail effects goes here
// fetch the thumbnail container
var _li = thumb.parents('li');
// if thumbnail is active, fade all the way.
var _fadeTo = _li.is('.active') ? '1' : '0.3';
// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
});
});
The issue is that I need to give the first item pulled from that list a class of "active", so the first image will be loaded into the slideshow. Everything else works right now, other than getting that first image loaded.
Any suggestions?
$('selector:first').addClass('active');
Maybe?
Or what about
# display on page
$class = 'class="active" ';
foreach($images as $img) {
echo "<li><img ".$class."src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
$class="";
}
Try this:
# display on page
$counter = 0;
foreach($images as $img) {
if ($counter == 0) { // first
echo "<li class=\"active\"><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
}
else
{
echo "<li><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
}
$counter++;
}
If you want to do that on the PHP side, you could count, in your foreach loop, how many images have been displayed -- and if 0 have been displayed, add a class="active" to the one you are currently echoing.
For instance, something like this should do the trick :
$counter = 0;
foreach($images as $img) {
echo "<li><img src=\"{$img['file']}\" ";
if ($counter === 0) {
echo 'class="active"';
}
echo " title=\"\" alt=\"\"></li>\n";
$counter++;
}
The first time you'll loop, $counter will be 0, and class="active" will be echoed ; next times, it won't be 0 anymore, and no addtionnal active class will be added.
In jquery:
$(".gallery_group li:first-child").addClass("active");
In php:
# display on page
$first = true;
foreach($images as $img) {
echo "<li " . ($first ? "class='active'" : "") . "><img src=\"{$img['file']}\" title=\"\" alt=\"\"></li>\n";
$first = false;
}