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>
Related
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>
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
Any idea why the code below is only loading the thumbnail into the fancybox overlay? The image array within .portfolio-slideshow is loading in the background fine, it's just not being triggered correctly with fancybox.
Wordpress code:
<a class="fancybox" href="<?php print $slideshow['guid']; ?>" rel="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
<div class="portfolio-slideshow">
<?php
$slideshow = get_custom_field('portfolio_images:to_array', 'get_post');
foreach($slideshow as $img) {
?>
<img src="<?php print $img['guid']; ?>" />
<?php } ?>
</div>
<h4><?php the_title(); ?></h4>
</a>
I had to wrap the array of images in the fancybox link + the rel title, this did the trick:
<div class="portfolio-slideshow">
<?php
$slideshow = get_custom_field('portfolio_images:to_array', 'get_post');
foreach($slideshow as $img) {
?>
<a class="fancybox" href="<?php print $img['guid']; ?>" rel="<?php the_title(); ?>"><img src="<?php print $img['guid']; ?>" /></a>
<?php } ?>
</div>
<a class="fancybox" href="<?php print $img['guid']; ?>" rel="<?php the_title(); ?>">
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
<h4><?php the_title(); ?></h4></a>
I'm using a theme that shows popular posts with the code below, and I need
someone to help me edit this code to make it show popular posts on the last week or
month.
<?php
$args = array();
$args['posts_per_page'] = $number_posts;
$args['orderby'] = 'comment_count';
$args['order'] = 'DESC';
$query = new WP_Query($args);
while($query->have_posts() ) : $query->the_post(); global $post; ?>
<li>
<a title="<?php the_title();?>" href="<?php the_permalink();?>">
<figure>
<?php if(has_post_thumbnail() ) { ?>
<a href="<?php the_permalink();?>">
<img src="<?php echo aq_resize(wp_get_attachment_url( get_post_thumbnail_id($post->ID) ), 42, 42, true); ?>" alt="<?php the_title();?>" />
</a>
<?php } else { ?>
<a href="<?php the_permalink();?>">
<img src="<?php echo get_template_directory_uri() . '/img/missing_56.png';?>" alt="<?php the_title();?>" />
</a>
<?php } ?>
</figure>
<p>
<?php the_title();?> <br />
<span> <?php _e('Le ', 'Voxis'); the_time("F d, Y");?>, <?php comments_popup_link(esc_html__('0 commentaires','Voxis'), esc_html__('1 commentaire','Voxis'), '% '.esc_html__('commentaires','Voxis')); ?> </span>
</p>
</a>
</li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
I have not yet tested below code but will assure that this will work for you.
<?php
$weekday=date("d m Y",strtotime('-7days'));
while($query->have_posts() ) : $query->the_post(); global $post;
$currentdate=date('d m Y',strtotime($post->post_date));
if($weekday < $currentdate) { ?>
<li>
...
body of code in <li> tag
...
</li>
<?php } ?>
...
rest of the code
?>
replace your code to this(get most recent last month post)
<?php
$today = getdate();
$args=array(
'post_type' => 'post',
'year'=>$today["year"],
'monthnum'=>$today["mon"]-1,
'orderby'=>'comment_count',
'order'=>'DESC',
'posts_per_page' =>$number_posts
);
$query = new WP_Query($args);
while($query->have_posts() ) : $query->the_post(); global $post; ?>
<li>
<a title="<?php the_title();?>" href="<?php the_permalink();?>">
<figure>
<?php if(has_post_thumbnail() ) { ?>
<a href="<?php the_permalink();?>">
<img src="<?php echo aq_resize(wp_get_attachment_url( get_post_thumbnail_id($post->ID) ), 42, 42, true); ?>" alt="<?php the_title();?>" />
</a>
<?php } else { ?>
<a href="<?php the_permalink();?>">
<img src="<?php echo get_template_directory_uri() . '/img/missing_56.png';?>" alt="<?php the_title();?>" />
</a>
<?php } ?>
</figure>
<p>
<?php the_title();?> <br />
<span> <?php _e('Le ', 'Voxis'); the_time("F d, Y");?>, <?php comments_popup_link(esc_html__('0 commentaires','Voxis'), esc_html__('1 commentaire','Voxis'), '% '.esc_html__('commentaires','Voxis')); ?> </span>
</p>
</a>
</li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
____________________________________________________________________________
for last 7 days post use this code:
<?php
function filter_where($where = '') {
$where .= " AND post_date > '" . date('Y-m-d', strtotime('-7 days')) . "'";
return $where;
}
add_filter('posts_where', 'filter_where');
query_posts('post_type=post&posts_per_page='.$number_posts.'&orderby=comment_count&order=DESC');
?>
<?php while (have_posts() ) : the_post(); ?>
<li>
<a title="<?php the_title();?>" href="<?php the_permalink();?>">
<figure>
<?php if(has_post_thumbnail() ) { ?>
<a href="<?php the_permalink();?>">
<img src="<?php echo aq_resize(wp_get_attachment_url( get_post_thumbnail_id($post->ID) ), 42, 42, true); ?>" alt="<?php the_title();?>" />
</a>
<?php } else { ?>
<a href="<?php the_permalink();?>">
<img src="<?php echo get_template_directory_uri() . '/img/missing_56.png';?>" alt="<?php the_title();?>" />
</a>
<?php } ?>
</figure>
<p>
<?php the_title();?> <br />
<span> <?php _e('Le ', 'Voxis'); the_time("F d, Y");?>, <?php comments_popup_link(esc_html__('0 commentaires','Voxis'), esc_html__('1 commentaire','Voxis'), '% '.esc_html__('commentaires','Voxis')); ?> </span>
</p>
</a>
</li>
<?php endwhile;
wp_reset_query();
?>
I have two different methods for displaying Wordpress Thumbnails
What I would like to do is, display the first method, and if it is not available then to display thumbs using the second method.
Below are the Two Methods for displaying Post Thumbnails.
Method 1
<!--Begin WordPress Featured post thumbnail-->
<div class="postthumbcon">
<?php
// check if the post has a featured image assigned to it.
if ( has_post_thumbnail() ) {
// get the src of the large size featured image
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
$thumbnailSrc = $src[0];
// output image resized with timthumb
?>
<div class="postthumb">
">
<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $thumbnailSrc; ?>&h=125&w=165" alt="">
</div>
<?php } ?>
</div>
<!--end WordPress Featured post thumbnail-->
Here is the second method.
<!--Begin Timthumb thumbnail-->
<?php // This will show the image and link the image to the post. Alter the width and height (in both places) to your needs. ?>
<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
<div class="postthumb">
" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" />
</div>
<?php } ?>
<!--End Timthumb thumbnail-->
Try something like this:
<div class="postthumbcon">
<?php
if ( has_post_thumbnail() ) {
// method one
} else if ( get_post_meta($post->ID, 'thumb', true) ) {
// Method two
}
?>
</div>
This will see if the post has a thumbnail, which you were already doing, but if it doesn't exist it will run the else clause meaning the second if statement will run only if the first fails.
Also, you appear to have the first part of what I am guessing to be a link in method two, see this line:
" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" />
Here's how your code could look in full:
<div class="postthumbcon">
<?php
if ( has_post_thumbnail() ) {
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large' );
$thumbnailSrc = $src[0];
?>
<div class="postthumb">
<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo $thumbnailSrc; ?>&h=125&w=165" alt="" />
</div>
<?php } else if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
<div class="postthumb">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" />
</a>
</div>
<?php } ?>
</div>