I have a condition according to which I want to display two different images.
Code Involved :
<span class="fa-stack fa-5x has-badge" data-count="<?php echo "". $row['SlackerTotal'] .""?>">
<div class="badgesize">
<img src="img/66.png" alt="" class="badge-img">
</div>
</span>
I have a data-count value which I am going to echo from the DB.
Now what I am trying to do here is that if the value of data count is less than or equal to 0, then one image will be be displayed in the image tag.Else a different image will be displayed.
Kindly help,how can I do so ?
Just Use IF condition Note : And take a look in A.J mentioned comment about span
<span class="fa-stack fa-5x has-badge" data-count="<?php echo "". $row['SlackerTotal'] .""?>"></span>
<div class="badgesize">
<?php
if($row['SlackerTotal']<=0)
{
?>
<img src="img/66.png" alt="" class="badge-img">
<?php
}
else
{
?>
<img src="img/67.png" alt="" class="badge-img">
<?php
}
?>
</div>
You can check for data-count attribute value and depending on it set the src value of the image tag.
Example with jQuery:
$(document).ready(function(){
var $parent = $('.fa-stack.fa-5x.has-badge');
var $img = $('img.badge-img');
if($parent.data('count') > 0 ) {
$img.attr('src','image path for more than 0');
} else {
$img.attr('src','image path for less than 0');
}
})
Note: Code is not tested
You have to use if-else condition to resolve this problem
can use as :
if($row['SlackerTotal'] <= 0) {
//your image, what you want to display
<div class="badgesize">
<a href="#">
<img src="img/66.png" alt="" class="badge-img">
</a>
</div>
} else {
//put your image, what you want to display in else condition
<div class="badgesize">
<a href="#">
<img src="image_path" alt="" class="badge-img">
</a>
</div>
}
Related
I understand foreach but this is new for me because within the foreach in PHP I have some script for each item that shows up and wondering why it only works for the item in the first item
In the code, I am getting an image from an MYSQL database. instead of using onclick in js I am learning more into jquery and only when I click the first image it will generate the
$("#main").load("includes/product.php");
path and change I want to change but in the product name and the cart button do not change the visuals.
<section id="new-products" class="clearfix">
<div class="title-block">
<h4>New Products</h4>
</div>
<?PHP
foreach ($item as $items){
?>
<div class="left-col-block">
<article class="product-box clearfix">
<a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" id="product-link">
<img src="<?PHP echo $items['image']; ?>" alt="Card Games" title="Card Games" height="80" width="80">
</a>
<?PHP echo $items['name']; ?><br>
<span class="price">$<?php echo $items['price'];?></span>
</article>
`<script>
$( "#product-link" ).click(function() {
$("#main").load("includes/product.php");
});
</script>
</div>
<div class="left-col-block">
</div>
<?PHP
}
?>
</section>
Expected:
I am wanting each link with the id of product-link to give the event trigger with jquery on each product and each id
Actual Results:
$("#main").load("includes/product.php");
only works on the first id that is equal to product-link
because of you have 3 like for each item and you want to set on click for every 3 link, you must use class attribute and set it unique for each item.
I changed your code to this:
<section id="new-products" class="clearfix">
<div class="title-block">
<h4>New Products</h4>
</div>
<?PHP
foreach ($item as $key=>$items){
?>
<div class="left-col-block">
<article class="product-box clearfix">
<a href="#store/category/<?PHP echo $items['category'];?>/<?PHP echo $items['brand'];?>/<?PHP echo $items['name'];?>" class="product-link-<?=$key?>">
<img src="<?PHP echo $items['image']; ?>" alt="Card Games" title="Card Games" height="80" width="80">
</a>
<?PHP echo $items['name']; ?><br>
<span class="price">$<?php echo $items['price'];?></span>
</article>
`<script>
$( ".product-link-<?=$key?>" ).click(function() {
$("#main").load("includes/product.php");
});
</script>
</div>
<div class="left-col-block">
</div>
<?PHP
}
?>
</section>
Found the answer was
<script>$( ".product-box a" ).click(function() {
$("#main").load("includes/product.php");
});</script>
since product-bot was a class and I didn't realize the # makes it check for id and the. makes it search for a class and class is able to be called multiple times whereas an id has to be unique
I am creating a simple image gallery that requires the first image to be shown first, while the images after are supposed to have a display;none property. How do I achieve it so that only the first image is different? The following is my code so far.
<div class="content">
<?php
foreach($variants['productVariants'][0]['productVariantImages'] as $variantImage){
if(isset($variantImage) && $variantImage['visible']){
?>
<img src="<?php echo $variantImage['imagePath']; ?>" class="image_<?php echo $variantImage['id']; ?>" style="display:none" alt="" />
<?php }}?>
</div>
My current output is
<div class="content">
<img src="images/bigs/2.jpg" class="image_1" style="display:none" alt="">
<img src="images/bigs/2.jpg" class="image_2" style="display:none" alt="">
<img src="images/bigs/3.jpg" class="image_3" style="display:none" alt="">
</div>
I would like to be able to achieve the following
<div class="content">
<img src="images/bigs/1.jpg" class="image_1" alt="">
<img src="images/bigs/2.jpg" class="image_2" style="display:none" alt="">
<img src="images/bigs/3.jpg" class="image_3" style="display:none" alt="">
</div>
You have multiple ways:
Using a variable (eg. $first, set it to true before the loop and to false at the end of the first iteration)
Using the keys of your (probably 0-indexed?) array (eg. foreach($variants['productVariants'][0]['productVariantImages'] as $key => $variantImage){, notice the $key => part). You can then check if $key is 0 in the loop and that's your first element.
As #alirezasafian suggested, simply use CSS - this is probably the most versatile method.
You don't need to use php for that, you can do it by css.
.content img:not(:first-child)
{
display: none;
}
.content img:not(:first-child) {
display: none;
}
<div class="content">
<img src="images/bigs/1.jpg" class="image_1" alt="1">
<img src="images/bigs/2.jpg" class="image_2" alt="2">
<img src="images/bigs/3.jpg" class="image_3" alt="3">
</div>
Im little bit stuck on a logic.scenario is i have a slider where two images are shown at a time taking 50%-50% part of screen,here is the simple html of it,
<div class="zeus-slider zeus-default" >
<div class="zeus-block">
<div class="zeus-slide s-50"> <img src="slider/slider1.jpg" data-effect="slideRight" alt="" /> </div>
<div class="zeus-slide s-50"> <img src="slider/slider2.jpg" data-effect="slideRight" alt="" /> </div>
</div>
</div>
here every block contains two images i have shown only one.now i have trying to make it dynamic, but i didnt get any idea how it will work, so i created database with two tables, each for individual image in a single block.Both table have fields like simg_id(A_I),img_name,simg_path.
here its my php on slider page.
<div class="zeus-block">
<?php
$slider_slt=getResultSet('select * from slider_img_master1 ORDER BY simg_id');
if(mysql_num_rows($slider_slt))
{
while($slider_data=mysql_fetch_assoc($slider_slt))
{
?>
<div class="zeus-slide s-50"> <img src="slider/first/<?php echo $slider_data['simg_path']?>" data-effect="slideRight" alt="" /> </div>
<?php }
} ?>
<?php
$slider_slt2=getResultSet('select * from slider_img_master2 ORDER BY simg_id');
if(mysql_num_rows($slider_slt2))
{
while($slider_data2=mysql_fetch_assoc($slider_slt2))
{
?>
<div class="zeus-slide s-50"> <img src="slider/second/<?php echo $slider_data2['simg_path']?>" data-effect="slideRight" alt="" /> </div>
<?php }
} ?>
</div>
now the problem is when i try to fetch path of image in slider, images are not changing one by one on both half of screen.instead it showing like both images from from both table top, another two images from both tables below 1st both, and so on , so full page is covered with images.
I know this idea of creating two tables for getting two images at once is silly,but i could not think any better.if any one can suggest any better way, it would be so helpful.
Update:getResultSet is function for mysql_query.
if anybody interested i found an answer for above question.
<div id="slide1" >
<div class="zeus-slider zeus-default" >
<?php
$slider_str="select *from slider_img_master1 where simg_status='Active'";
$i=1;
$result=mysql_query($slider_str);
if(mysql_num_rows($result)>0)
{
echo '<div class="zeus-block">';
while($row=mysql_fetch_assoc($result))
{
if($i%2==1 && $i!=1)
{
echo '<div class="zeus-block">';
}
?>
<div class="zeus-slide s-50"> <img src="slider/<?php echo $row['simg_path'];?>" data-effect="slideRight" alt="" /> </div>
<?php
if($i%2==0)
{
echo '</div>';
}
$i++;
}
} ?>
</div>
<div class="clear"> </div>
<div class="next-block"> </div>
<div class="prev-block"> </div>
</div>
I'm trying to build an if statement for when a variable is filled with a url it will display a button and link to the site, and when the variable is empty the link and button will not display. So far I got it to where it is displays the button and links but making it into an if statement keeps on breaking my site. If you see a problem with the code below, please help. Thanks
<div id="social_icon">
<?php if (isset($fburl))
{
<a href="<?php echo $options['fburl']; ?>">
<img src="http://farm6.staticflickr.com/5534/9135106179_43deba3d15_o.png"" width="30"
height="30"></a>;
}
else
{
//dont show anything
}
?>
</div>
You're trying to use HTML within your PHP code, so PHP sees this as an unexpected variable/string. Either use echo for this, or close the PHP statement, and then write your HTML.
Either:
<div id="social_icon">
<?php if(isset($fburl)){ ?>
<a href="<?php echo $options['fburl']; ?>">
<img src="http://farm6.staticflickr.com/5534/9135106179_43deba3d15_o.png" width="30" height="30" />
</a>
<?php }else{
//dont show anything
} ?>
</div>
Or:
<div id="social_icon">
<?php if (isset($fburl)){
echo '<img src="http://farm6.staticflickr.com/5534/9135106179_43deba3d15_o.png" width="30" height="30" />';
}else{
//dont show anything
} ?>
</div>
Edit
Actually, I would assume it's not outputting anything because your if statement is checking for $fburl whereas you're echoing the link as $options['fburl']. If the facebook url is located at $options['fburl'], try:
<div id="social_icon">
<?php if(isset($options['fburl'])){ ?>
<a href="<?php echo $options['fburl']; ?>">
<img src="http://farm6.staticflickr.com/5534/9135106179_43deba3d15_o.png" width="30" height="30" />
</a>
<?php }else{
//dont show anything
} ?>
</div>
Edit 2
If the options are set but don't contain a link, you will also need check for that:
<div id="social_icon">
<?php if(isset($options['fburl']) && !empty($options['fburl'])){ ?>
<a href="<?php echo $options['fburl']; ?>">
<img src="http://farm6.staticflickr.com/5534/9135106179_43deba3d15_o.png" width="30" height="30" />
</a>
<?php }else{
//dont show anything
} ?>
</div>
Syntax error, change it to:
<?php if (isset($fburl))
{
//missed end tag here
?>
<a href="<?php echo $options['fburl']; ?>">
<img src="http://farm6.staticflickr.com/5534/9135106179_43deba3d15_o.png"" width="30"
height="30"></a>;
<?php
//add another php start tag
}
else
{
//dont show anything
}
?>
So, I'm working on a site where on the top of certain pages I'd like to display a static graphic and on some pages I would like to display an scrolling banner.
So far I set up the condition as follows:
<?php
$regBanner = true;
$regBannerURL = get_bloginfo('stylesheet_directory'); //grabbing WP site URL
?>
and in my markup:
<div id="banner">
<?php
if ($regBanner) {
echo "<img src='" . $regBannerURL . "/style/images/main_site/home_page/mock_banner.jpg' />";
}
else {
echo 'Slider!';
}
?>
</div><!-- end banner -->
In my else statement, where I'm echoing 'Slider!' I would like to output the markup for my slider:
<div id="slider">
<img src="<?php bloginfo('stylesheet_directory') ?>/style/images/main_site/banners/services_banners/1.jpg" alt="" />
<img src="<?php bloginfo('stylesheet_directory') ?>/style/images/main_site/banners/services_banners/2.jpg" alt="" />
<img src="<?php bloginfo('stylesheet_directory') ?>/style/images/main_site/banners/services_banners/3.jpg" alt="" />
.............
</div>
My question is how can I throw the div and all those images into my else echo statement? I'm having trouble escaping the quotes and my slider markup isn't rendering.
<div id="banner">
<?php if($regbanner): ?>
<img src="<?php echo $regBannerURL; ?>/style/images/main_site/home_page/mock_banner.jpg" />
<?php else: ?>
<div id="slider">
<img src="<?php echo ($bannerDir = bloginfo('stylesheet_directory') . '/style/images/main_site/banners/services_banners'); ?>/1.jpg" alt="" />
<img src="<?php echo $bannerDir; ?>/2.jpg" alt="" />
<img src="<?php echo $bannerDir; ?>/3.jpg" alt="" />
.............
</div>
<?php endif; ?>
</div><!-- end banner -->
If you don't like the offered solution using the syntaxif(...):...else...endif; you also have the possibilty of using heredoc-style to include bigger html-parts into an echo-statement without the need of escaping it.
The code-formatting in here unfortunatly messed up my example, which I wanted to post. But if you know the heredoc-notation, it should not be a problem ;)