I want to place additional images of products when open a product right to the product image as in default opencart 2.0.1.1 theme it is below the product image How to do it.Please help me.
First define a class named "image1" for the first <li></li> in your <ul></ul> class thumbnails. Give width 50% to both the divs named "col-sm-4" for product images and "col-sm-8" for product name and description. Remove float: left from .thumbnails .image-additional in stylesheet.css and define margin to 80%. Then, define a new class like this:
.thumbnails .image1 {
width:70%;
float:left;
}
Go to catalog/view/theme/default/template/product/product.tpl
Actually the code will be like this
From line No 24
<?php if ($thumb || $images) { ?>
<ul class="thumbnails">
<?php if ($thumb) { ?>
<li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
<?php if ($images) { ?>
<?php foreach ($images as $image) { ?>
<li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
<?php } ?>
**Replace 25 line to 35 line like this**
<?php if ($thumb || $images) { ?>
<ul class="thumbnails">
<div class="row">
<div class="col-lg-9">
<?php if ($thumb) { ?>
<li><a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>"><img src="<?php echo $thumb; ?>" id="zoom_01" data-zoom-image="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
</div>
<div class="col-lg-3">
<?php if ($images) { ?>
<?php foreach ($images as $image) { ?>
<li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
<?php } ?>
</div>
</div>
Related
I have created a custom Gutenberg block that is basically a link. When I click the block in the editor I immediately get sent to the page the block links to instead of being able to edit the block. How do I stop this from happening? I've already tried putting pointer-events: none as a style on it but that doesn't do anything surprisingly.
<a href="<?php the_field('link') ?>" id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo esc_attr($layout); ?>">
<div class="icon_callout_content">
<div class="off_content">
<div class="color_callout_icon">
<img src="<?php echo $icon ?>" height="<?php if($iconHeight){ echo $iconHeight . "px"; } ?>">
</div>
<h3><?php echo $title ?></h3>
</div>
<div class="hover_content">
<?php echo $description ?>
</div>
</div>
</a>
Since this may help others in the future, wrap your <a> tag in an if statement to check if your in the admin area. If you are, then it won't output those tags.
<?php if ( ! is_admin() ) : ?>
<a href="<?php the_field('link') ?>" id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> <?php echo esc_attr($layout); ?>">
<?php endif; ?>
<div class="icon_callout_content">
<div class="off_content">
<div class="color_callout_icon">
<img src="<?php echo $icon ?>" height="<?php if($iconHeight){ echo $iconHeight . "px"; } ?>">
</div>
<h3><?php echo $title ?></h3>
</div>
<div class="hover_content">
<?php echo $description ?>
</div>
</div>
<?php if ( ! is_admin() ) : ?>
</a>
<?php endif; ?>
I have tried to code my wordpress theme as simple as possible but I don't really understand why I can't display an image from Advanced Custom Field into a modal box using Featherlight.js (http://noelboss.github.io/featherlight/)
Here is my online page http://www.skuar.com
This is my single.php code, which simply display the image custom field
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
and this is the wp loop content
<div id="post">
<a href ="<?php the_permalink(); ?>">
<div class="img" href="<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>" data-featherlight="image">
<?php
$image = get_field('image');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
</div>
</a>
</div>
I just would like to open the image in a lightbox...
Is that make sense?
Thanks!
In invalid double quotes in your code. Try this code:
<div id="post">
<a href ="<?php the_permalink(); ?>">
<div class="img" href="<?php $image = get_field('image');
if( !empty($image) ): ?>
<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>
<?php endif; ?>" data-featherlight="image">
</div>
</a>
</div>
i learn to create my own wp themes. but i have problem when create megamenu. i would say thanks, for someone help me. how to full width, this megamenu.
<nav id="navigation">
<ul class="pagemenu">
<li class="megamenu">
<a title="<?php echo get_bloginfo('name'); ?>" href="<?php echo get_bloginfo('url'); ?>">Megamenu</a>
<ul>
<li>
<h3><a title="<?php echo get_bloginfo('name'); ?>" href="<?php echo get_bloginfo('url'); ?>">Celebrity</a></h3>
<p><a title="<?php echo get_bloginfo('name'); ?>" href="<?php echo get_bloginfo('url'); ?>">Celebrity</a></p>
<p><a title="<?php echo get_bloginfo('name'); ?>" href="<?php echo get_bloginfo('url'); ?>">Technology</a></p>
<p><a title="<?php echo get_bloginfo('name'); ?>" href="<?php echo get_bloginfo('url'); ?>">Business</a></p>
<p><a title="<?php echo get_bloginfo('name'); ?>" href="<?php echo get_bloginfo('url'); ?>">Fashion</a></p>
<p><a title="<?php echo get_bloginfo('name'); ?>" href="<?php echo get_bloginfo('url'); ?>">Celebrity</a></p>
<p><a title="<?php echo get_bloginfo('name'); ?>" href="<?php echo get_bloginfo('url'); ?>">Technology</a></p>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
Here's are the link jsfiddle
have a good day
devan
you can just give these setting to fill whole width
#navigation li.megamenu{
width: 100%;
}
#navigation li.megamenu ul{
width: 100%
}
is this you want??
jsfiles
For a recently developed wordpress website http://stc.co.in, I'm using Huge-IT portfolio to show the projects in each sectors. On clicking on projects a popup is showing with multiple images. Now I want to show image caption or title above the big image which was added while uploading image through WordPress. Please guide how to achieve this.
Thanks in advance.
Regards, Sanjay
If the plugin cant let you do it simply with text editor, in wordpress you need to search the specific section you want and work on php file.
When you have founded it you can put an html section with your title.
you need to made changes in plugin file..
follow path :
wordpress-sitename/wp-content/plugins/portfolio-gallery/Front_end/portfolio_front_end_view.php
modify line :
<ul id="huge_it_portfolio_popup_list_<?php echo $portfolioID; ?>">
<?php
foreach($images as $key=>$row)
{
$imgurl=explode(";",$row->image_url);
array_pop($imgurl);
$link = $row->sl_url;
$descnohtml=strip_tags($row->description);
$result = substr($descnohtml, 0, 50);
?>
<li class="pupup-element" id="huge_it_portfolio_pupup_element_<?php echo $row->id; ?>">
<div class="heading-navigation_<?php echo $portfolioID; ?>">
<div style="clear:both;"></div>
</div>
<div class="popup-wrapper_<?php echo $portfolioID; ?>">
<div class="image-block_<?php echo $portfolioID; ?>">
<?php if($paramssld["ht_view2_show_popup_title"]=='on'){?><h3 class="title"><?php echo $row->name; ?></h3><?php } ?>
<?php if($row->image_url != ';'){ ?>
<img alt="<?php echo $row->name; ?>" id="wd-cl-img<?php echo $key; ?>" src="<?php echo $imgurl[0]; ?>" />
<?php
global $wpdb;
$cimg_url = $imgurl[0];
$attachment = $wpdb->get_results("SELECT ID FROM wp_posts WHERE guid='".$cimg_url."'",'ARRAY_A');
$attachment_title = get_the_title($attachment[0]['ID']);
?>
<div class="cls_img_ttl" id="main_img_ttl"><?php echo $attachment_title; ?></div>
<?php } else { ?>
<img alt="<?php echo $row->name; ?>" id="wd-cl-img<?php echo $key; ?>" src="images/noimage.jpg" />
<?php
} ?>
</div>
<div class="right-block">
<?php if($paramssld["ht_view2_show_popup_title"]=='on'){?><h3 class="title"><?php echo $row->name; ?></h3><?php } ?>
<?php if($paramssld["ht_view2_thumbs_position"]=='before' and $paramssld["ht_view2_show_thumbs"] == 'on'){?>
<div><ul class="thumbs-list_<?php echo $portfolioID; ?>">
<?php
global $wpdb;
foreach($imgurl as $key=>$img){
$cimg_url = $img;
$attachment = $wpdb->get_results("SELECT ID FROM wp_posts WHERE guid='".$cimg_url."'",'ARRAY_A');
$attachment_title = get_the_title($attachment[0]['ID']);
?>
<li><a href="<?php echo $row->sl_url; ?>" class="group1" data-ttl="<?php echo $attachment_title; ?>" >
<img src="<?php echo $img; ?>">
</a></li>
<?php } ?>
</ul></div>
<?php } ?>
<?php if($paramssld["ht_view2_show_description"]=='on'){?><div class="description"><?php echo $row->description; ?></div><?php } ?>
<?php if($paramssld["ht_view2_thumbs_position"]=='after' and $paramssld["ht_view2_show_thumbs"] == 'on'){?>
<div><ul class="thumbs-list_<?php echo $portfolioID; ?>">
<?php $imgurl=explode(";",$row->image_url);array_pop($imgurl);
foreach($imgurl as $key=>$img){?>
<li><img src="<?php echo $img; ?>"></li>
<?php } ?>
</ul></div>
<?php } ?>
<?php if($paramssld["ht_view2_show_popup_linkbutton"]=='on'){?>
<div class="button-block">
<a href="<?php echo $link; ?>" <?php if ($row->link_target=="on"){echo 'target="_blank"';}?>><?php echo $paramssld["ht_view2_popup_linkbutton_text"]; ?></a>
</div>
<?php } ?>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</div>
</li>
<?php
}?>
</ul>
JS:
jQuery('#huge_it_portfolio_popup_list_<?php echo $portfolioID; ?> .popup-wrapper_<?php echo $portfolioID; ?> .right-block ul.thumbs-list_<?php echo $portfolioID; ?> li a').click(function(){
var width=jQuery(window).width();
if(width<=767){
jQuery('body').scrollTop(0);
}
jQuery(this).parent().parent().find('li.active').removeClass('active');
jQuery(this).parent().addClass('active');
var main_img_ttl = jQuery(this).attr('data-ttl');
alert(main_img_ttl);
jQuery(this).parents('.right-block').prev().find('.cls_img_ttl').html(main_img_ttl);
jQuery(this).parents('.right-block').prev().find('img').attr('src',jQuery(this).find('img').attr('src'));
return false;
});
you can download file here : LINK
Not working zoom after swap
After clicking on the additional image when zoomed displayed old image
what am I doing wrong
Not working zoom after swap
After clicking on the additional image when zoomed displayed old image
what am I doing wrong
">
">" data-zoom-image="" title="" alt="" />">
" title=""> " title="" alt="" />
<script>
$(document).ready(function(){
// Get main image info
var img = $('#zoom_01').attr('src'); // get img popup href
if (img != undefined) {
var imgWidth = img.substring(img.lastIndexOf('-') + 1, img.lastIndexOf('x'));
var imgHeight = img.substring(img.lastIndexOf('x') + 1, img.lastIndexOf('.'));
}
$('.image-additional img').hover(function() {
var newsrc = $(this).parent().attr('href');
$('#zoom_01').attr({
src: newsrc,
title: $(this).attr('title'),
alt: $(this).attr('alt'),
width: imgWidth,
height: imgHeight
});
$('#zoom_01').parent().attr('href', newsrc);
});
});
</script>
<div class="<?php echo $class; ?>">
<?php if ($thumb || $images) { ?>
<ul class="thumbnails">
<?php if ($thumb) { ?>
<li><div class="thumbnail" title="<?php echo $heading_title; ?>"><img id="zoom_01" src="<?php echo $thumb; ?>" data-zoom-image="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /><i class="fa fa-search"></i></div></li>
<?php } ?>
<?php if ($images) { ?>
<?php foreach ($images as $image) { ?>
<li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>