I have my site that the users can swap out three products and there are images for each product so rather then doing an ajax call every time the user clicks the button, I wanted to just have the image urls in the html with display none to grab when needed.. so for example, here is my html
<img src="<?php print $product[$selected_product]['product_image']; ?>" width="auto" height="199" alt="" />
</div>
<p style="display:none;" class="image_<?php print $product["standard"]['product_id']; ?>"><?php echo $product["standard"]['product_image']; ?></p>
<p style="display:none;" class="image_<?php print $product["professional"]['product_id']; ?>"><?php echo $product["professional"]['product_image']; ?></p>
<p style="display:none;" class="image_<?php print $product["premium"]['product_id']; ?>"><?php echo $product["premium"]['product_image']; ?></p>
As you can see the one that is displaying is the one selected but if the user selects one of the other images i need to change the src of the image tag...here is my jquery
var image = $(this).parents(".item").find(".image_" + this_id).text();
image = $.trim(image);
console.log(image)
$(this).parents(".item").find(".item-image img").attr("src", image);
but the problem is that the console.log prints out the image url correctly but it sometimes when i click the image doesnt change and i get this error
Image corrupt or truncated: http://posnation.com/shop_possystems/image/data/1B.png
A clearer way to do this would be to render three <img> tags and set their CSS so that they are on top of each other. Then use the jQuery show/hide functions to show the appropriate one.
Related
I have the image attribute 'upsell_gif' applied to my gif that should be only visible in the upsell box.
When I change in the upsell.php
<?php echo $this->helper('catalog/image')->init($_link, 'small_image')->resize(125) ?>
to
<?php echo $this->helper('catalog/image')->init($_link, 'upsell_gif')->resize(125) ?>
I get an error. Why? I can call the image with
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'upsell_gif')->resize(150, 150); ?>" />
in the view.phtml perfectly..
Uh, I got it. My attribute was set up wrong. When creating your Media attribute, select 'visible in front end' before selecting 'image'. It will disappear then and it is not editable later then.
I'm trying to create a simple image gallery that displays thumbnails of uploaded images. Once a thumbnail is clicked, I would like to be directed to a page with the large version of the image, along with a comment section. So basically I'm trying to do something similar to deviantart. What I have now looks something like this:
<a href="<?php echo $image->large_image_path; ?>">
<img src="<?php echo $image->thumbnail_image_path; ?>"></a>
Clicking on a thumbnail will take to me to the large image path, which is not really what I want. Any help is greatly appreciated.
You must make the href="<?php echo $image->large_image_path; ?>" to somehing like href="show_image.php?image_path=<?php echo $image->large_image_path; ?>"
In show_image.php you can den get the path of the image by $_REQUEST['image_path'], and add it into the code like this:
<img src="<?php echo $_REQUEST['image_path']; ?> />
The you can add information or styling around the bigger image.
So, link to a PHP page instead of the image. Even better, put the image path in to a database, and use the image id to get the path and information of the image. Like this:
href="show_image.php?image_id=<?php echo $image->id; ?>"> and then in show_image.php, given that you have a method for getting the image:
<?php $image = GetImage($_REQUEST['image_id']); ?>
<img src="<?php echo $image->large_image_path; ?> />
<?php echo $image->description; ?>
<?php echo $image->date; ?>
Hope this helps you on the way.
I am trying to show image thumbnail of products in order view page (sales_order/view) area of Magento. Adding preview image of the product as a column.
I have my line as the below:
load($_item->getProductId()); ?>init($_product, 'thumbnail')->resize(75, 75); ?>"
alt="<?php echo $this->htmlEscape($_product['name']); ?>" border="0" width="75" />
But this just pulls through a blank box with no image at all in it, not even the Magento default image.
It will likely just be name of field or attribute slightly off? Or maybe even casing? But can't really see what I'm doing wrong.
If I replace:
load($_item->getProductId());
with:
load($_item['product_id'])->getData('image')
I can pull in the location of the image which shows on the page. But can't get it to work to actually display the image.
Can pull thumbnail of product in fine on the product grid page, but can't locate page to replicate code from.
Any help to polish off above would be appreciated.
Final code was the below. To get this working add it to /app/design/adminhtml/default/default/template/sales/order/view/items/renderer/default.phtml
<td class="a-center">
<?php $product = Mage::getModel('catalog/product')->setStoreId($_item->getOrder()->getStoreId())->load($_item->getProductId());?>
<p align="center">
<img src="<?php echo Mage::helper('catalog/image')->init($product, 'small_image')->resize(75); ?>" width="75" height="75" />
</p>
</td>
You can show ordered item image with below code
$order = Mage::getModel('sales/order')->load($orderId);
foreach($order->getAllItems() as $item){
$product=Mage::getModel('catalog/product')->load($item->getProductId());
echo Mage::helper('catalog/image')->init($product, 'small_image')->resize(50,50);
}
this can be helpful for you i think you just need to place your attribute value
http://magentocodes.blogspot.in/2013/01/get-custom-attribute-value-in-magento.html
I am using lightbox to show an image in php.
My current code:
<a class="sri" href="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" rel="lightbox">
<img src="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" class="photo_frame photo_size" >
<br />
<?php
echo $res['title'];
?>
</a>
CSS and JS for lightbox have already been included. In the above code, $res['title'] and $res['path'] are being fetched from database.
If I click on the image or the text which is showing as $res['title'], lightbox effect is showing. The image is within the lightbox. Now I need the $res['title'] value also be displayed when the lightbox is opened along with the image.
How do I do that?
Just use the title parameter in the <a> tag, as mentionned in the Lightbox Documentation:
Optional: Use the title attribute if you want to show a caption.
You must add the title:
<a class="sri" href="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" rel="lightbox">
<img src="administrator/all_photo/mywork/
<?php
echo $res['path'];
?>
_1.jpg" title="
<?php
echo $res['title'];
?>
" class="photo_frame photo_size" >
</a>
You should be able to move all of your markup into a div. Add rel="lightbox" to that div, it should work. Although that depends on the lightbox library you are using.
I'm using Drupal 6.x. This is my code on my node-product.tpl.php template. I've created a custom jquery gallery for the products. It works great, but I'm just missing tool tips from my images (both large and small thumbnails). To upload images I'm using a CCK field named field_images. There I input the image titles when I upload the images. How can I add the tool tip code snippet to make it work?
<div class="product-large">
<img src="/sites/default/files/imagecache/360x280/<?php print $node->field_images[0]['filename']; ?>" />
</div>
<div class="product-small">
<?php
// get all images
foreach ($node->field_images as $images) {
?>
<img src="/sites/default/files/imagecache/120x90/<?php print $images['filename']; ?>" rel="/sites/default/files/imagecache/360x280/<?php print $images['filename']; ?>" />
<?php
}
?>
</div>
Thanks much appreciated!
Chris
The "tooltip" is a result of the title HTML attribute. You'll want to add title="foo" to your img tag.
Perhaps:
<img src="/sites/default/files/imagecache/120x90/<?php print $images['filename']; ?>" rel="/sites/default/files/imagecache/360x280/<?php print $images['data']['filename']; ?>" title="<?php print $images['title']; ?>"/> for the second image and similarly $node->field_images[0]['data']['title'] for the first.