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
....
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'm working with a template in Wordpress that someone else set up and I need to fix something.
There is a javascript function that adds a class to every css class that's called object-fit - the added class is called bg--image. This was to fix an error showing up in IE11 , where all the images where messed up.
The problem now is that there's a page where this function shouldn't apply even though the css class is also called object-fit.
I'm a little confused on how to work here. As I don't want to mess up the whole theme and my coding options are quite limited, it just makes a knot in my brain.
Is there any possibility I can add a javascript function to not apply the IE 11 function on this one specific class? the difference is that the one img where it shouldn't apply is a span, the other one is not.
Any ideas?
try {
if (ie_ver() == 11) {
var $img = $('.banner--small').find('img');
$('.banner--small').attr('style', 'background-image:url(' + $img.attr('src') + ')');
$('.banner--small').addClass('bg--image');
$img.addClass('hidden');
var $img2 = $('.object-fit').find('img');
$('.object-fit').attr('style', 'background-image:url(' + $img2.attr('src') + ')');
$('.object-fit').addClass('bg--image');
$img2.addClass('hidden');
$('.slick__inner').each(function() {
var $img3 = $(this).find('img');
$(this).attr('style', 'background-image:url(' + $img3.attr('src') + ')');
$(this).addClass('bg--image');
$img3.attr('style', 'display:none');
});
<div class="article--text">
<div class="container container--tiny spacing--huge">
<?php the_content(); ?>
</div>
<div class="container margin-bottom--huge">
<?php if (get_field('direktionen')) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach (get_field('direktionen') as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo $child['link']; ?>" class="link--direction text--center margin-bottom--medium" target="_blank">
<span class="object-fit"><img src="<?php echo $child['photo']['sizes']['medium']; ?>"
srcset="<?php echo $child['photo']['sizes']['mobile']; ?> 2x,<?php echo $child['photo']['sizes']['medium']; ?> 1x"
alt="<?php echo $child['name']; ?>" /></span>
<h3>
<?php echo $child['name']; ?>
</h3>
<p>
<?php echo $child['adresse']; ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } else if ($children) { ?>
<div class="flex flex--wrap flexgrid--gutter flexgrid--normal">
<?php foreach ($children as $key => $child) { ?>
<div class="flex__item one-third lg-one-half xs-one-whole">
<a href="<?php echo get_permalink($child->ID); ?>" class="link--direction text--center margin-bottom--medium">
<span class="object-fit"><img src="<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?>"
srcset="<?php echo get_the_post_thumbnail_url($child->ID, 'mobile'); ?> 2x,<?php echo get_the_post_thumbnail_url($child->ID, 'medium'); ?> 1x"
alt="<?php echo $child->post_title; ?>" /></span>
<h3>
<?php echo $child->post_title; ?>
</h3>
<p>
<?php echo get_field('adresse', $child->ID); ?>
</p>
</a>
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
Since this is a WordPress template, you have a couple of solutions.
Solution 1 - HTML & jQuery modification
If you can add an additional class to only this page's HTML, then applying the following updates to this page template should allow you to avoid having the .bg--image class added to just this page:
HTML
<span class="object-fit avoid-change">
jQuery
$('.object-fit').not( '.avoid-change' ).addClass('bg--image');
More info on jQuery's .not() method:
https://api.jquery.com/not/
Solution 2 - WordPress Conditional
Another option is to use a WordPress conditional to avoid running the entire script on this page.
You could use the following to prevent the script from loading in this template:
<?php if(! is_page_template( 'your-template-name.php' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
You could also target an exact page by its page ID. In this example, your page ID would be 7.
<?php if(! is_page( '7' )){ ?>
// place your script or wp_enqueue_script() code here
<?php } ?>
More info on WordPress conditionals:
https://codex.wordpress.org/Conditional_Tags
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.
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>