I have a probelm with a magento project that I am currently building. My product page has a main image (configurable product) and thumbnails below. I have got my code to the stage where clicking a thumbnail appends the image to the main image area, however i require the href for the link it is contained it to also append to that imgs url. Hope this makes sense, any help welcome.
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<div class="grid_12 grid_spacer_bottom">
<?php
$_img = '<img id="image" class="img-left img-inlineblock responsive-img" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" />';
//echo $_helper->productAttribute($_product, $_img, 'image');
?>
<?php echo $_helper->productAttribute($_product, $_img, 'image'); ?>
</div>
<div class="clear"></div>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<div class="grid_4 grid_spacer_bottom">
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $_product->getName();?>" onclick="$('image').src = this.href; return false;">
<img class="img-left img-inlineblock responsive-img" src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
I'm assuming that you are try to make when you click on the large image it will have the url of the thumbnail
Give this href an ID
<?php echo $_helper->productAttribute($_product, $_img, 'image'); ?>
Are you using jquery or prototype (if default magento then this)
Prototype
$('img_href').setAttribute('href', this.href);
//$('img_href').href = this.href; // or
jQuery
$("#img_href").attr("href", this.href);
Plain Javascript
document.getElementById('img_href').href = this.href;
Update the thumbnail onclick
onclick="$('image').src = this.href; $('img_href').setAttribute('href', this.href); return false;"
$('image').parentNode.href='your url'; ?
Related
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 new with Magento and I couldn't find a clear answer about this. In the browser, my site images show like this:
www.example.com/shop/media/catalog/product/cache/1/image/820x/040ec09b1e35df139433887a97daa66f/i/m/image-name.jpg
I would like my images to show like this:
www.example.com/shop/media/catalog/product/i/m/image-name.jpg
I don't resize my images or use watermarks.
On media.phtml (app/design/frontend/mytheme/default/template/catalog/product/view/media.phtml), I have this code:
<div class="img-holder<?php if($labelsoptions['labelsorder'] == 'sale_new'):?> labels-sale-new<?php endif; ?>">
<?php if(($fancy['fancybox_status']==1) and ($fancy['fancybox_product']==1)): ?>
<i class="fa fa-search"></i>
<?php endif; ?>
<a id='zoom' class="cloud-zoom" data-zoom="showTitle: false, adjustX: -5, adjustY:-5, tint: '#fff', tintOpacity:0.6, position:'inside'" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"><?php
$_img = '<img id="image" src="' . $helpImg->getImg($_product, 'image', $imgSize, null) .'"" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?></a>
<?php echo MAGE::helper('MyThemeOptions')->getProductLabels($_product, 'new'); ?>
<?php echo MAGE::helper('MyThemeOptions')->getProductLabels($_product, 'sale'); ?>
</div>
I replaced this:
<a href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"
with this code I found in google, but nothing happens:
<a href="<?php echo Mage::getSingleton('catalog/product_media_config')->getBaseMediaUrl().$this->getProduct()->getImage(); ?>"
I appreciate your help. Thanks.
Here is the way to get full size product image:
$fullImgUrl = Mage::getUrl('media') . 'catalog/product' . $_product->getImage();
btw, you can use browser inspect feature to know what is outputted
I wanto to show all main categories on home page with image . i write the following code for tat but it is not show image .
<?php
$_helper = Mage::helper('catalog/category');
$_categories = $_helper->getStoreCategories();
foreach ($_categories as $_category):
$_categoryThumb = $_category->getThumbnail();
echo $_category->getImageUrl();
?>
<li>
<h2> <a href="<?php echo $_helper->getCategoryUrl($_category) ; ?>">
<img src="<?php echo $this->getUrl() . 'media/catalog/category/' . $_categoryThumb; ?>" alt="<?php echo $_category->getName()?>"/>
</a>
</li>
<?php endforeach; ?>
try this
give the path for src in the img tag as src="<?php echo '/media/catalog/category/'.$_categoryThumb; ?>"
I find this com_content/views/article/tmpl/default.php I created a template override and here is the code:
<?php if ($params->get('access-view')):?>
<?php if (isset($images->image_fulltext) && !empty($images->image_fulltext)) : ?>
<?php $imgfloat = (empty($images->float_fulltext)) ? $params->get('float_fulltext') : $images->float_fulltext; ?>
<div class="pull-<?php echo htmlspecialchars($imgfloat); ?> item-image">
<img
<?php if ($images->image_fulltext_caption):
echo 'class="caption"'.' title="' .htmlspecialchars($images->image_fulltext_caption) . '"';
endif; ?>
src="<?php echo htmlspecialchars($images->image_fulltext); ?>" alt="<?php echo htmlspecialchars($images->image_fulltext_alt); ?>"/> </div>
<?php endif; ?>
Before img tag how to form, modify this php code to be clickable the image to self url:
<a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)); ?>"> <img
Here is the resolution:
<a href="<?php echo JURI::root().$images->image_fulltext; ?>">
Now the image is "clickalble" to self url
JURI::root() > your webpage url (like: something.com)
$images->image_fulltext > in joomla 3.1 you can choose an image what is displayed when you click to readmore, ie when you read the full article, that image have an url, like: /images/stories/freshsite/something.jpg
This php code combines these two code, to be: something.com/images/stories/freshsite/something.jpg > when you click on the image, only this image will shows in you browser :)
Overview
I am trying to get a photo feed on to my site using Flickr's api and the phpflickr library. I can successfully get the photoset on to my site, but it shows all the photos from every photoset, what I was hoping to achieve was to show the primary photo from each photoset, and then if the user clicked on the image it would show the full photoset in a lightbox/shadowbox.
My Code
<div id="images" class="tabnav">
<ul class="items">
<?php $count = 1; ?>
<?php foreach ($photosets['photoset'] as $ph_set): ?>
<?php $parentID = $ph_set['parent']; ?>
<?php $photoset_id = $ph_set['id'];
$photos = $f->photosets_getPhotos($photoset_id);
foreach ($photos['photoset']['photo'] as $photo): ?>
<li>
<a rel="shadowbox['<?=$count;?>']" href="<?= $f->buildPhotoURL($photo, 'medium') ?>" title="<?= $photo['title'] ?>">
<img src="<?= $f->buildPhotoURL($photo, 'rectangle') ?>" alt="<?= $photo['title'] ?>" width="210" height="160" title="<?= $photo['title'] ?>" />
<h3><?=$ph_set['title']?></h3>
<p><?=$ph_set['description'];?></p>
</a>
</li>
<?php endforeach; ?>
<?php $count++; ?>
<?php endforeach; ?>
</ul>
</div>
Another Attempt
I have also tried calling the getPhotos function differently, instead of sending it without any parameters I sent it with parameters
$photos = $f->photosets_getPhotos($photoset_id, NULL, NULL, 1, NULL);
The above code stopped the showing all the photos from each photoset and started showing just the primary image, but it also stopped making the rest of the photos accesible to me.
Is there something I can do to make this work? I am totally out iof ideas.
Regards and thanks
I came up with this soltion, thought I would post it in case anyone else hits this problem,
<?php $count = 1; ?>
<?php foreach ($photosets['photoset'] as $ph_set): ?>
<?php $parentID = $ph_set['parent']; ?>
<li>
<?php $photoset_id = $ph_set['id'];
$photos = $f->photosets_getPhotos($photoset_id);
foreach ($photos['photoset']['photo'] as $photo): ?>
<?php if($parentID == $ph_set['parent']): ?>
<a rel="lightbox[album<?=$count;?>]" href="<?= $f->buildPhotoURL($photo, 'medium') ?>" title="<?= $photo['title'] ?>">
<?php endif;?>
<img src="<?= $f->buildPhotoURL($photo, 'rectangle') ?>" alt="<?= $photo['title'] ?>" width="210" height="160" title="<?= $photo['title'] ?>" />
<h3><?=$ph_set['title']?></h3>
<?php if($ph_set['description'] != null) :?>
<p><?=$ph_set['description'];?></p>
<?php endif; ?>
<?php if($parentID == $ph_set['parent']): ?>
</a>
<?php endif;?>
<?php endforeach; ?>
</li>
<?php $count++; ?>
What you'll probably want to do is starting by iterating through the whole array and grouping each album into a separate array first and making a special array for your album's main photo.
Then you can easily iterate through the arrays to display each album and the code becomes much more maintainable.