So I have a couple of thumbnails and a big image to left of them, when you click one of the thumbnails I want it to change the main image to which ever thumbnail is clicked, I was thinking of using something like:
<script type="text/javascript">
function changeImage(){
document.getElementById('image').src='';
}
</script>
Then on the main image:
<img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image"/>
and finally on the thumbnails:
<img src="<?php echo $image['thumb']; ?>" onclick="changeImage()" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />
Obviously I will need to add something into .src='' but I'm just not sure what, is there something that I can add in there instead of e.g 1.jpg which will select whichever image is clicked?
You can pass a reference to the image as a parameter.
function changeImage(x){
document.getElementById('image').src = x.src;
}
You can continue to call the function using your first way:
<img src="<?php echo $image['thumb']; ?>" onclick="changeImage(this)" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" />
TRY THIS DEMO
<script>
function updateIMG(e) {
document.getElementById("preview").src = e;
}
</script>
Related
I'm trying to switch a base image with a thumbnail when clicked (under product pages). For some reason I can't get it to work at all. Here's my code that creates the thumbnails:
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="desktop more-views">
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
<?php if ($this->isGalleryImageVisible($_image)): ?>
<li>
<a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" data-image-index="<?php echo $i; ?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</li>
<?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
</div>
<?php endif; ?>
Here's my JS code (in the file MY_THEME/skin/frontend/rwd/default/js/app.js) for switching the actual image:
wireThumbnails: function() {
//trigger image change event on thumbnail click
$j('.product-image-thumbs .thumb-link').click(function(e) {
e.preventDefault();
var jlink = $j(this);
var target = $j('#image-' + jlink.data('image-index'));
ProductMediaManager.swapImage(target);
});
}
Does anyone know what I'm doing wrong? I've followed the solutions at this link but they don't work! I wanted to comment on that post but I don't have enough reputation to do so! :( any help would be greatly appreciated!
EDIT: Here are the errors showing up on the console:
Each time I click on a thumbnail the last-most error comes up again and again...
I am using a jquery slider in my application.The input type hidden has got some image url paths. I want to get "
img-paths- <?php echo $omsg_id; ?>
"
$omsg_id value into
var image_path_id = "#img-paths-"+$(this).data('id');
when i console printed in fire bug, the output was #img-paths-undefined
how to resolve it ?
<div class="post-image">
<?php $imagePathArray = explode(',',$uploads); ?>
<input id="img-paths-<?php echo $omsg_id; ?>" type="hidden" value="<?php echo htmlentities(json_encode($imagePathArray)); ?>" />
<div id="gallery7-<?php echo $omsg_id; ?>" ></div>
<script>
$(function(e) {
var image_path_id = "#img-paths-"+$(this).data('id');
var show_gallery_id = "#gallery7-"+$(this).data('id');
console.log(show_gallery_id);
console.log(image_path_id);
$(show_gallery_id).imagesGrid({
images:$.parseJSON($(image_path_id).val()),
align: true,
getViewAllText: function(imgsCount) { return 'View all' }
});
});
</script>
<!--<img src="<?php //echo $contentimage; ?>" class="image show-in-modal" alt="image post">-->
<p><?php echo $message; ?></p>
</div>
this refers to window object, thus $(this).data('id') will not return the desired data.
You can directly use $omsg_id in script.
var image_path_id = "#img-paths-<?php echo $omsg_id; ?>";
var show_gallery_id = "#gallery7-<?php echo $omsg_id; ?>";
I want to show product details in pop-up on click product name in product page. Here is my code:
<?php
if (count($data['product']) > 0) {
foreach ($data['product'] as $product) {
$product_id = $product->getId();
$product_name = $product->getName();
$isporductImage = $product->getImage();
$product_image = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/product" . $product->getImage();
$isproductthumbnail = $product->getThumbnail();
$product_thumbnail = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/product" . $product->getThumbnail();
$collectionimage = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/category/thumb/" . $data['collection']['image'];
$productplaceholderImage = $this->getSkinUrl() . "whi/assets/images/whi_placeholder.png";
?>
<div class="celeb-post" id="products-listing" style="text-align: center; width: 228px;">
<?php if ($isproductthumbnail != "") { ?>
<div class="image-div" style="background: url('<?php echo $product_thumbnail;?>');">
<img src="<?php echo $product_thumbnail; ?>" alt="celeb" />
</div>
<?php }elseif ($isporductImage != "") { ?>
<div class="image-div" style="background: url('<?php echo $product_image;?>');">
<img src="<?php echo $product_image; ?>" alt="celeb" />
</div>
<?php } else { ?>
<div class="image-div" style="background: url('<?php echo $productplaceholderImage;?>');">
<img src="<?php echo $productplaceholderImage ?>" alt="celeb" />
</div>
<?php } ?>
<div class="hover-image-bg" style="width: 86.9%; height: 69.3%;">
<img style="padding-left: 38px;" src="<?php echo $this->getSkinUrl() ?>whi/assets/images/heart.png">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/bag.png">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/move.png">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/assign.png">
</div>
<div style="clear:both; height:10px;"></div>
<div class="celeb-name-title ucase clearfix" style="text-align:center;"><?php echo $product_name; ?></div>
</div>
<?php
}
}else{ ?>
<table style="width:100%;">
<tr><td style="text-align: center; height: 100px; font-weight: bold;">No Product found in Collection, you can add by clicking on +New button at the top right.</td></tr>
</table>
<?php
}
?>
And login-box5 code is:
<div id="login-box5" class="login-popup login-popup5">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/close_pop.png" class="btn_close" style="width:100%;" />
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/new-collection.png">
<div class="brand-position-outfite" id="celeb-position-outfite">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/celeb.png">
<h5>Brand Name</h5>
<div style="clear:both;"></div>
<h5>Product Name</h5>
<BR><BR>
<textarea rows="10" class="add-txtarea-cmt">Description....</textarea>
</div>
</div>
So, simply if I click on Product Name, then popup will appear and show details of that product, like product name and product description. Can anyone help me to sort out this problem. I think this can be done through AJAX, JavaScript but don't know how can I embed script in my code.
Waiting of your kind response thanks in advance.
Yes you need to create ajax function to load the data. Also you can create ajax request handle so that particular template will be used to show the data. You can get better idea about the functionality using the below Quick view extension:
https://github.com/czettnersandor/magento-quick-view-ajax
I would suggest you output your "popup"-information in your existing product-listing/view template in a special div-block which is connected to your product.
A simple example for product listing:
you list your productnames and popupdata in the template/catalog/product/list.phtml:
<?php foreach ($_productCollection as $_product): ?>
<h3 class="productpreview" data-sku="<?php echo $_product->getSku(); ?>"><?php echo $_product->getName(); ?></h3>
<div class="popup" id="pop_<?php echo $_product->getSku(); ?>">
/*insert your other productdata here*/
<?php echo $_product->getShortDescription(); ?>
</div>
<?php endforeach;?>
The class popup should be display: none; in css
I would suggest that you then use something like fancybox to display that content. If you have access to jquery, you could also write this to show the content and with added css you could easily make a cool looking popup:
jQuery(document).ready(function(){
$('.productpreview').click(function(){
var sku = $(this).data('sku');
$('#pop_'+sku).toggle();
});
});
if you want the functionality in the product view page you modifiy template/catalog/product/view.phtml
<h3 class="productpreview" data-sku="<?php echo $_product->getSku(); ?>"><?php echo $_product->getName(); ?></h3>
<div class="popup" id="pop_<?php echo $_product->getSku(); ?>">
/*insert your other productdata here*/
<?php echo $_product->getShortDescription(); ?>
</div>
It is the same CSS/Jquery code, you only need to remove the foreach-loop.
I am uploading about 30 images for each product with numeric names like:
001.png
002.png
003.png ....
but after uploaded it showing on front end like
002.png
003.png
001.png ....
how could it be auto sort in front end following is the piece of code from Magento media.phtml
<ul class="product-image-thumbs">
<?php foreach ($this->getGalleryImages() as $_image):?>
<li>
<a href="<?php echo Mage::helper('catalog/image')->init($_product, 'image', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" rel="prettyPhoto[mixed]">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($_thumbWidth, $_thumbHeight); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</a>
</li>
<?php endforeach?>
<?php if ($_360IsSet && !$_embedded):?>
<?php $_360ViewWidth = preg_replace("/[^0-9]/", "", $_360ViewWidth) ?>
<?php $_360ViewHeight = preg_replace("/[^0-9]/", "", $_360ViewHeight) ?>
<li>
<a href="<?php echo $this->getSkinUrl('webrotate360/frame_' . $_viewerSkin . '.html') . '?iframe=true&width=' . $_360ViewWidth . '&height=' . $_360ViewHeight ?>" rel="prettyPhoto[mixed]">
<img src="<?php echo $_360icon ?>" />
</a>
</li>
<?php endif?>
</ul>
sure #WhiteHat here is my code:
var mediaImages = [<?php $numItems = count($this->getGalleryImages());$i = 0;foreach ($this->getGalleryImages() as $_image):?> <?php echo '"'?><?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(450, 450); if(++$i === $numItems) { echo '"';} else { echo '",';}?><?php endforeach?>];
var mediaImagesSorted = mediaImages.sort();
jQuery('.MediaDiv').html(mediaImagesSorted);
I have some images that I create using data from a MySQL database. The data in the database are a title and a description. This is not visible on the website until a user clicks the image. Javascript then loads it in some other place, not anywhere near my image.
My problem is the accessing of this data. I create my elements in PHP with this structure:
<div class="image-container">
<img src="<?php echo $url; ?>" alt="<?php echo $title; ?>" />
<div class="title" style="display: none;"><?php echo $title; ?></div>
<div class="description" style="display: none;"><?php echo $description; ?></div>
</div>
When the image is clicked, I call for the data like this:
$('.image-container').click(handle_image_click);
function handle_image_click(e) {
var title = jQuery(e.currentTarget).find('.title').html();
var description = jQuery(e.currentTarget).find('.description').html();
(...)
}
Allthough this works, I don't find this a very 'clean' solution. It requires me having to hide div elements and 'store' data in them. I know you can store data to elements in jQuery using the following code:
$('#myElement').data('someName', 'someValue');
Now my question is: is there any way to not have to create the div elements in php (as seen in code block 1), but directly add the description and title to the 'data'-property of the element, ready to be fetched by javascript/jQuery?
you can use the data-* html5 attribute to store data
<div class="image-container" data-title="<?php echo $title; ?>" data-description="<?php echo $description; ?>">
<img src="<?php echo $url; ?>" alt="<?php echo $title; ?>" />
</div>
then in the handler
$('.image-container').click(handle_image_click);
function handle_image_click(e) {
var title = jQuery(this).data('title');
var description = jQuery(this).data('description');
(...)
}
yes you can.. using html5 data attribute
<img src="<?php echo $url; ?>" data-title="<?php echo $title; ?>" data-description="<?php echo $description; ?>" alt="<?php echo $title; ?>" />
and fetch it with jquery using data()
...
function handle_image_click(e) {
var title = jQuery(e.currentTarget).find('img').data('title'); //gives title
var description= jQuery(e.currentTarget).find('img').data('description'); //gives description
....