i use this template for my image slider "https://www.jssor.com/demos/image-gallery.slider"
i try to change a image if image1 is empty(NULL) to image2, there is my sample code i have try but doesnt work.
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:550px;overflow:hidden;">
<?php
if (!empty ($upload_dir.$data['image1'])){
?>
<div>
<img data-u="image" src="<?php echo $upload_dir.$data['image1']; ?>" />
<img data-u="thumb" src="<?php echo $upload_dir.$data['image1']; ?>" />
</div>
<?php
}else{
?>
<div>
<img data-u="image" src="<?php echo $upload_dir.$data['image2']; ?>" />
<img data-u="thumb" src="<?php echo $upload_dir.$data['image2']; ?>" />
</div>
<?php
}
?>
this code is work when image1 is able on databases, but when it null the image is not change as image2
It's because your $upload_dir is not empty so $upload_dir.$data['image1'] would not be empty.
Try changing the condition to:
if (!empty($data['image1'])) {
...
}
Related
I have a PhP shopping cart for autoparts and I need to be able to enlarge the retrieved image upon clicking on it. The problem is I can't manually assign an ID to every picture because I'm echoing them from the database.
I've tried assigning one ID/class to all the pictures that get retrieved and enlarge them on click using the JS function but can't get it working.
$items_array = $db_controller->runQuery("SELECT * FROM mystuff ORDER BY ID ASC");
if (!empty($items_array)) {
foreach($items_array as $key=>$value){
?>
<div class="DisplayCartItems">
<form method="post" action="?action=add&mscode=<?php echo $product_array[$key]["mscode"]; ?>">
<img src="<?php echo $product_array[$key]["msimage"]; ?>" class="imgcartdisplay" align="alignnone"/> /* Right here I need some help */
<div class="lif"><strong>Category:</strong> <?php echo $product_array[$key]["mscategory"]; ?></div>
<div class="lif"><strong>Category №:</strong> <?php echo $product_array[$key]["mscatnum"]; ?></div>
<div class="lif"><strong>Stock №:</strong> <?php echo $product_array[$key]["msnomer"]; ?></div>
<div class="lif"><strong>Mark:</strong> <?php echo $product_array[$key]["msmark"]; ?></div>
<div class="lif"><strong>Model:</strong> <?php echo $product_array[$key]["msmodel"]; ?></div>
<div class="lif"><strong>Year:</strong> <?php echo $product_array[$key]["msyear"]; ?></div>
<div class="lif"><strong>Price:</strong> <?php echo "$".$product_array[$key]["msprice"]; ?></div>
<div style="text-align:center"><input type="number" name="oap" placeholder="Offer a price:"></div>
<br class="">
<div class="cartan">
Quantity: <input type="text" class="product-quantity" name="quantity" value="1" size="2" />
<br class="">
<input type="submit" onclick="AddCartAlert()" value="Add to cart" /></div>
</form>
</div>
<?php
}
}
?>```
I think if I can somehow assign an ID or class name for every picture that get displayed from the MySql and onclick change it's width/height, that'd do the job.
If I have correctly understood:
you should replace this:
<img src="<?php echo $product_array[$key]["msimage"]; ?>" class="imgcartdisplay" align="alignnone"/> /* Right here I need some help */
with:
<a target="_blank" href="<?php echo $product_array[$key]["msimage"]; ?>"><img src="<?php echo $product_array[$key]["msimage"]; ?>" class="imgcartdisplay" align="alignnone"/></a>
for opening the image in another tab.
Or... if you mean something like this https://lokeshdhakar.com/projects/lightbox2/#examples you have to use javascript (for example: Image #1)
In your case something like this: (of course you need to add lightbox script: https://lokeshdhakar.com/projects/lightbox2/#getting-started)
<a data-lightbox="image-1" data-title="My caption" href="<?php echo $product_array[$key]["msimage"]; ?>"><img src="<?php echo $product_array[$key]["msimage"]; ?>" class="imgcartdisplay" align="alignnone"/></a>
I'm trying to figure out some php code.
I have a slider inside a fancybox popup.
What i need to do is then i click on image it gets me its alt text in "image-product-name" P class.
<div class="modal-body">
<button class="close">×</button>
<div class="UI-IMAGE image">
<img src="<?php echo Mage::helper('core/image')->init($_product, 'image', 'catalog/product')->resize(640, 400) ?>" width="640px" height="400px"
alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>"
title="<?php echo $this->htmlEscape($this->getImageLabel()) ?>">
</div>
<p class="image-product-name"><?php echo $_product->getName() ?></p>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="previews UI-PREVIEWS">
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="#"
title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"
data-image="<?php echo $this->helper('core/image')->init($this->getProduct(), 'thumbnail', 'catalog/product', $_image->getFile())->resize(640, 400); ?>">
<img src="<?php echo $this->helper('core/image')->init($this->getProduct(), 'thumbnail', 'catalog/product', $_image->getFile())->resize(78, 78); ?>" width="78px" height="78px"
alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
</a>
</li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>
</div>
Right now its just echoes an image name.
What should i change in order to make it echo active image alt text?
You need javascript for this. In the next example I've used jQuery:
$('.imgClass').click(function(){ //When user click on your img
var altImg = $(this).attr('alt'); //Save the alt attribute into a variable
$('p.image-product-name').html(altImg); //Place the variable between the p tags;
});
without js just change the variable from:
<p class="image-product-name"><?php echo $_product->getName() ?></p>
to
<p class="image-product-name"><?php echo $this->htmlEscape($_image->getLabel()) ?></p>
pretty straighforward
I am trying to figure out how to change the photo without the page refreshing. I have seen some of the example but just cannot figure out how to implement it in to my working page.
This is what I have right now:
<div id="propertyDetailsImage">
<img class="image photo" src="<?php echo $property->photos->photo[$mainPhoto - 1]->url; ?>" width="<?php echo $property->mainPhotoWidth * 0.77 ?>" height="<?php echo $property->mainPhotoHeight * 0.77 ?>" alt="<?php echo $property->address->full; ?>"/>
</div>
<div class="photoPosition">
<?php
$previousPhoto = $mainPhoto - 1;
if($previousPhoto == 0) {
$previousPhoto = $property->totalPhotos;
}
$nextPhoto = $mainPhoto + 1;
if ($nextPhoto > $property->totalPhotos) {
$nextPhoto = intval(1);
}
?>
<img src="images/previous.png" alt="Previous photo" height="12" width="13" border="none"/>
<span id="photoPosition"><?php echo $mainPhoto; ?></span> of <?php echo $property>totalPhotos; ?>
<img src="images/next.png" alt="Next photo" height="12" width="13" border="none" />
</div>
</div>
<div class="col-md-6">
<div id="thumbnails">
<h3 class="additional">Photos</h3>
<?php
// Iterate throught the list of photos
foreach($property->photos->photo as $photo) {
?>
<script type="text/javascript">
addPhoto(
<?php echo $photo->id; ?>,
<?php echo $photo->width; ?>,
<?php echo $photo->height; ?>,
"<?php echo $photo->caption; ?>");
</script>
<img src="<?php echo $photo->url; ?>" width="<?php echo $photo->widthSmall; ?>" height="<?php echo $photo->heightSmall; ?>" class="image photo" id="photo<?php echo $photo->position; ?>" alt="Additional Photo of <?php echo $photo->address->advertising; ?>" onclick="return showPhoto(<?php echo $photo->position; ?>)" />
<?php }
?>
Any help is appreciated. Cheers
Dima
You should use ajax to get like this results.
you should go here,
The image slider shown in this demo is for free.
For detailed instructions, please visit online
http://www.menucool.com/slider/javascript-image-slider-demo1
Goal:
I am trying to show an image in the view.ctp. I am trying to grab the image that was saved with the rest of the information. I am pretty sure the code is 100% correct in the ProductsController, if not that'll be posted next.
Here is the code in the view.ctp for products:
<h1>Viewing Product</h1>
<div><b>Name:</b> <?php echo $Product['Product']['name']; ?></div>
<div>
<img src="<?php echo $path .'/'. $row['Product']['filename']; ?> " width="300px" />
</div>
<div><b>Description:</b> <?php echo $Product['Product']['description']; ?></div>
<div><b>Price:</b> <?php echo $Product['Product']['price']; ?></div>
Read down a bit to see the actual solution.
Shoudln't
<img src="<?php echo $path .'/'. $row['Product']['filename']; ?> " width="300px" />
be:
<img src="<?php echo $path .'/'. $Product['Product']['filename']; ?> " width="300px" />
?
Since the original poster actually answered their own question I thought I'd elaborate.
The Solution:
Replacing:
<img src="<?php echo $path .'/'. $row['Product']['filename']; ?> " width="300px" />
with:
<?php echo $this->Html->image('$Product['Product']['filename']') ?>
I was trying to change the style of only a part of php. This is my codes;
if($fetch_array)
{
$foto_destination = $fetch_array['foto'];
echo "<img src = '$foto_destination' height='150px' width='150px'>";
}
else
{
?>
<div style= "position:absolute; left:350px; top:70px;">
<?php
echo "<img src = 'images/avatar_default.png' height='150px' width='150px'>";
?>
</div>
But, this php part is inside if. This is why i could not change it? I want to display the image where i define it inside the div tag if the statement of "if" is true. How can i do this? Where am i missing?
Thanks
If I understand you correctly, it should be:
<?php
if($fetch_array){
?>
<div style= "position:absolute; left:350px; top:70px;">
<?php
$foto_destination = $fetch_array['foto'];
print " <img src = '$foto_destination' height='150px' width='150px'>";
}else{
?>
<div style= "position:absolute; left:350px; top:70px;">
<img src = 'images/avatar_default.png' height='150px' width='150px'>
<?php
}
?>
</div>
It shows the $foto_destination, if there is one.
HTH
Did you mean like this?
<?php
if($fetch_array) {
$photo = $fetch_array['foto'];
$styles = 'position:absolute; left:350px; top:70px;';
} else {
$photo = 'images/avatar_default.png';
$styles = 'position:absolute; left:350px; top:70px;';
}
?>
<div style="<?php echo $styles; ?>">
<img src="<?php echo $photo; ?>" height="150" width="150" />
</div>
That is correct or you can do an isset()
if (isset($fetch_array) {
...
The only advantage being that it will not error if the variable is undefined
Here's a more compact version, shorttags must be enabled.
<div style="position:absolute; left:350px; top:70px;">
<img src="<?= isset($fetch_array['foto']) ? "images/avatar_default.png" : $foto_destination['foto'] ?>" height="150px" width="150px" />
</div>
otherwise:
<div style="position:absolute; left:350px; top:70px;">
<img src="<?php echo isset($fetch_array['foto']) ? "images/avatar_default.png" : $foto_destination['foto'] ?>" height="150px" width="150px" />
</div>