I'm using fancybox plugin as a lightbox plugin. On my woocommerce product page I have created a link that should open a gallery associated with each product (the code below is in content-product.php inside the loop so it works fine).
global $product;
$attachment_ids = $product->get_gallery_attachment_ids();
<div class="product_quick_view">
<?php $first_image = wp_get_attachment_image_src($attachment_ids[0], 'full'); ?>
<a class="fancybox" rel="group<?php echo $product->id; ?>" href="<?php echo $first_image[0]; ?>"><?php echo esc_html('Quick view', 'theme'); ?></a>
<div class="hidden_gallery">
<?php foreach($attachment_ids as $image_id){
$image_url = wp_get_attachment_image_src( $image_id, 'full' );
echo '<a class="fancybox" rel="group'.$product->id.'" href="'.$image_url[0].'">'.wp_get_attachment_image( $image_id, 'full' ).'</a>';
}; ?>
</div>
</div>
Which outputs this
<div class="product_quick_view">
<a class="fancybox" rel="group3709" href="../uploads/2014/09/image1.jpg">Quick view</a>
<div class="hidden_gallery">
<a class="fancybox" rel="group3709" href="../uploads/2014/09/image1.jpg">
<img width="552" height="820" src="../uploads/2014/09/image1.jpg" class="attachment-full" alt="image1">
</a>
<a class="fancybox" rel="group3709" href="../uploads/2014/09/image2.jpg">
<img width="552" height="820" src="../uploads/2014/09/image2.jpg" class="attachment-full" alt="image2">
</a>
</div>
</div>
The .hidden_gallery class will make the images in that div not visible. This should make it so that the fancybox will go through all the images in the same rel attribute.
But for some reason, it's not doing that. When I click the 'Quick view' link, I get the image that is attached to that link, but no other images (and they are in the DOM).
Is this because the fancybox jQuery fired before the images could be loaded with the woocommerce? I have it inside the $(document).ready() environment, should I wrap it inside the .load() environment or use the .imagesLoaded plugin?
Ok, found the answer. Apparently fancybox is not working, and is generally having issues with woocommerce, so I used the one that comes with woocommerce.
Just add this
<a itemprop="image" data-rel="prettyPhoto[product-gallery]<?php echo $product->id;?>" href="...
This will group them and you'll use woocommerce's own fancybox that works.
Related
I'm trying to make a slider in the home with six contents previews. I don't want the previews links to their content, I would want to change their link to some subcategories under a parent. I think changing the permalink to the featured image would be good.
I try to use this tutorial: https://slickmedia.co.uk/blog/wordpress-add-link-featured-image/
It works well but not for the preview, it changes the permalink of the featured image in the open content, not in the preview.
A link like this:
It works well but only for a subcategory, I think I would need a sorting loop to take the subcategories of Articles.
I post the code of the slider from front-page.php
<!-- SLIDES STORIE -->
<div class="uk-section color-bg-storie">
<div class="uk-container-large">
<h2 class="uk-heading-small uk-text-center"><?php bloginfo('name');?>:</h2>
<div uk-slider="clsActivated: uk-transition-active; autoplay: true;">
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
<ul class="uk-slider-items uk-child-width-1-2#s uk-child-width-1-3#m" uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-padding-large; delay: 300; repeat: true">
<?php
// La Query
$ipp_the_query = new WP_Query( 'category_name=slider&posts_per_page=6' );
// Il Loop
while ( $ipp_the_query->have_posts() ) :
$ipp_the_query->the_post(); ?>
<?php $ipp_image_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'ipp_small' ); ?>
<li class="uk-padding-large">
<a href="/index.php/category/articoli/paesaggi/">
<img src="<?php echo $ipp_image_attributes[0]; ?>" alt="" uk-svg>
</a>
<div class="uk-position-center uk-panel">
<a href="<?php the_permalink(); ?>">
<div><?php the_excerpt(); ?></div>
</a>
</div>
</li>
<?php endwhile;
// Ripristina Query & Post Data originali
wp_reset_query();
wp_reset_postdata(); ?>
</ul>
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
</div>
</div>
I'm searching for a method to link some banner/post preview to a category instead of the open post.
Thanks for all the support!
I'm trying to set my page so that when a user clicks the thumbnail of the current post, it expands in a Fancybox popup.
<?php
$featured_img_url = get_the_post_thumbnail_url($post->ID);
?>
<?php if ( has_post_thumbnail() ) { ?>
<div class="featured-image" data-fancybox="gallery" href="<?php $featured_img_url ?>"
<?php the_post_thumbnail(); ?>
</div>
<?php } ?>
This works, in that the image opens as expected when it's clicked. But when I click off the overlay, the thumbnail has disappeared. display: none has been added to it inline.
I have also tried wrapping the div in an <a> tag and using that, but this has the same outcome.
<?php
$featured_img_url = get_the_post_thumbnail_url($post->ID);
?>
<?php if ( has_post_thumbnail() ) { ?>
<a href="<?php $featured_img_url ?>" class="fancybox" data-fancybox="gallery">
<div class="featured-image bShadow">
<?php the_post_thumbnail(); ?>
</div>
</a>
<?php } ?>
I have other images on the page assigned with Advanced Custom Fields that work fine with Fancybox, so I'm assuming the issue is with how I'm trying to get the thumbnail image using php.
Edit: Here's a video of the current outcome: https://www.useloom.com/share/f525f4f0e4c642c8800e82532a99e326
It looks like you have not correct url for your featured link and it is treated as "inline" content instead of "image".
Anyway, you could follow this demo - https://codepen.io/fancyapps/pen/VGoRqO?editors=1010 - and use "trigger element" feature by adding data-fancybox-trigger attribute for featured link.
I have a custom post type called 'suppliers' which is used to display a series of supplier's logos in the footer.
<?php $suppliers_loop = new WP_Query( array( 'post_type' => 'suppliers', 'posts_per_page' => 7 ) ); ?>
<?php if ($suppliers_loop->have_posts()):?>
<?php while ( $suppliers_loop->have_posts() ) : $suppliers_loop->the_post(); ?>
<?php $image = get_field('image');?>
<div class="col-1-7 mobile-col-1-4">
<a href="<?php echo(get_field('suppliers_url'))?>" target="_blank">
<img src="<?php echo $image['url'];?>" title="<?php echo $image['title'];?>" alt="<?php echo $image['alt'];?>"/>
</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
This works well on every page of the site including other custom post type archives and categories apart from the standard WordPress category page? Where the loop returns:
<div class="col-1-7 mobile-col-1-4">
<a href="" target="_blank">
<img src="" title="" alt=""/>
</a>
</div>
If I replace echo $image['title'] with the_title() it returns:
<div class="col-1-7 mobile-col-1-4">
<a href="" target="_blank">
<img src="" title="Digital White Ink" alt=""/>
</a>
</div>
<div class="col-1-7 mobile-col-1-4">
<a href="" target="_blank">
<img src="" title="Environment" alt=""/>
</a>
</div>
etc..
These returned titles are pages and other post types (some of which are in the bin)? Can anyone shed any light on what on earth is going wrong and how to rectify it?
It is better not to change the php file in the wordpress. The code will be back to default if the theme updated.
My suggestion is change the CSS using "custom css plugin". Sorry for my bad english and thank you.
I am currently working on a shop page which works with Wordpress + Woocommerce Plugin. I edited the woocommerce Files so that I have custom products, menus and so on.
I managed to get current images from my products, but now I want them to appear on click (the little image Icon, on the Screenshot)
But instead of showing the current product image it shows the first image of each category
.
Here is my current code that loads the wrong product thumbnail:
<div class="modal-content">
<a itemprop="image" href="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" class="zoom" rel="thumbnails" title="<?php echo get_the_title( get_post_thumbnail_id() ); ?>">
<?php echo get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ) ) ?>
</a></div>
It is located in woocommerce/content-product.php.
Thank you in advance
Nico
So this is the solution, I had to create dynamic IDs. As I wrote it was always the same image, the reason of this was that there was only one ID and not multiple/dynamic.
This was the code I had to add to the id:
<div id="modal-<?php echo $product->id ?>" class="modal">
And here is the other one:
<a data-target="modal-<?php echo $product->id; ?>" class="modal-trigger"><i class="material-icons red-text right">photo</i></a>
I am using a filterable plugin for portfolio items. This is the part of the code that display the thumbnail of each portfolio item and the title of the post. The link when is pressed is opens the image bigger but I would want that link to go to each portfolio item corresponding to the image thumbnail.
What would I have to modify?
<div class="view view-first <?php ps_the_terms(); ?>">
<?php ps_post_thumb(array(400,300)); ?>
<div class="mask">
<h2><?php the_title(); ?></h2>
<p><?php echo ps_post_excerpt(80); ?></p>
<a rel="colorbox" href="<?php the_permalink(); ?>" class="">View Details +</a>
</div>
</div>
<a rel="colorbox" href="<?php the_permalink(); ?>" class="">View Details +</a>
Remove rel="colorbox" as that's probably what the JavaScript is using for a hook.
You may also need to change <?php the_permalink(); ?> if that doesn't already go to the portfolio item.
If the permalink is not using the post link try:
<?php echo post_permalink( $ID ); ?>
https://codex.wordpress.org/Function_Reference/post_permalink