When I click one of the preview images, in order to bring up the fancybox gallery, it just swipes the image to the right and gives me this broken overlay. Not sure what the issue is here...
HTML (Note I'm using WordPress and Advanced Custom fields):
<?php if ( have_rows("inspiration_gallery") ) : ?>
<?php $i = 0; while ( have_rows("inspiration_gallery") ) :
the_row();
$img = get_sub_field("inspiration_image");
$img_id = $img['ID'];
$img_url = $img['url'];
$gallery_id = $gallery_id ? $gallery_id : $img_id;
$related = get_sub_field("inspiration_related");
?>
<?php if ($i == 0): ?>
<!-- Preview Image -->
<a class="inspiration__preview-link" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>">
<?php echo wp_get_attachment_image( $img_id, "full", false, array("class" => "inspiration__prev_img") ); ?>
</a>
<?php else: ?>
<!-- Gallery Fancybox Link -->
<a class="inspiration__gallery-link none" href="<?php echo esc_url($img_url); ?>" data-fancybox="gallery-<?php echo esc_attr($gallery_id); ?>"></a>
<?php endif; ?>
<?php $i++; endwhile; ?>
<?php endif; ?>
I've got the latest versions of Fancybox JS and CSS files enqueued.
Related
I am currently working on a site where my client wants a list of icons and when you click on an icon a panel slides in with the information relating to that icon. Here is a link to the section - https://vibrantpropertyservices-u8uj.temp-dns.com/wp/services/#services.
I have the sliding panel working but I can't seem to get the relevant content to show, it just shows the first icon's info. Here is my code:
<?php
$services_query = new WP_Query( array(
'post_type' => 'servicespage',
'posts_per_page' => -1,
'order' => 'ASC',
'orderby' => 'menu_order'
)
);
?>
<?php if ( $services_query->have_posts() ) : ?>
<?php while ( $services_query->have_posts() ) : $services_query->the_post(); ?>
<?php $current_id = get_the_ID(); ?>
<div class="icon" onclick="openNav()" data-src="content-<?php echo $current_id ?>">
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<img src="<?php echo $image[0]; ?>">
<?php endif; ?>
<h3><?php the_title(); ?></h3>
</div>
<div id="slide" class="overlay">
×
<div id="content-<?php echo $current_id ?>">
<div class="test">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
<?php endif; ?>
</div>
/* Open when someone clicks on the span element */
function openNav() {
document.getElementById("slide").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
document.getElementById("slide").style.width = "0%";
}
I know I'm calling the id of "slide" but I don't know how to target <div id="content-<?php echo $current_id ?>"> for each individual link?
Many thanks
remove onclick function for both open
<div class="icon" data-src="content-<?php echo $current_id ?>">
and for close also
×
add below Jquery instead of functions
jQuery(document).on("click",".services-wrap .icon",function(){
jQuery(this).closest('div.overlay').css('width:100%');
});
jQuery(document).on("click",".overlay .closebtn",function(){
jQuery(this).closest('div.overlay').css('width:0%');
});
I am trying to get my website to link the slider image. Nothing in my wordpress has the options, so I opened up the slider php from the file manager, and I am trying to figure out exactly what I need to do to enable the image to link out without having to put on the "caption". Here is the website
<div id="home-slide-wrapper">
<div id="home-slide" class="<?php echo $img_slide_effect_direction; ?>">
<ul class="slides">
<?php
foreach( $slides as $slide ) :
$image_id = get_post_meta($slide->ID, 'info_image', true);
// $resized_image_src = wp_get_attachment_image_src($image_id, 'full');
// $resized_image_src = $resized_image_src[0];
$resized_image_src = theme_get_image( $image_id, 5000, $img_slide_height, true );
// Caption
$caption_pos = get_post_meta($slide->ID, 'info_caption_pos', true);
$caption_title = __(get_post_meta($slide->ID, 'info_caption_title', true));
$caption_text = __(get_post_meta($slide->ID, 'info_caption', true));
$link = __(get_post_meta($slide->ID, 'info_link', true));
// Pre-Process
$caption_title = ( $link != '' && $caption_title != '' ) ? '' . $caption_title . '' : $caption_title;
$caption_title_bg_tone = 'slide-caption-bg-' . getDarkLightYIQ( $sitewide_caption_title_bg_color );
$caption_style[] = ( $sitewide_caption_title_text_color != '' ) ? 'color:' . $sitewide_caption_title_text_color . ';' : '';
$caption_style[] = 'background-color:' . $sitewide_caption_title_bg_color . ';';
$caption_title_style = 'style="' . implode( ' ', $caption_style ) . '"';
?>
<li>
<img src="<?php echo $resized_image_src; ?>" alt="<?php echo $slide->post_title; ?>" />
<?php if( $caption_title || $caption_text ): ?>
<div class="slide-caption <?php echo $caption_pos; ?>">
<div class="container">
<?php if( $caption_title != '' ) : ?>
<div class="slide-caption-headline <?php echo $caption_title_bg_tone; ?>"><?php echo $caption_title; ?></div>
<?php endif; ?>
<?php if( $caption_text ) : ?>
<div class="slide-caption-text"><?php echo $caption_text; ?></div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</div>
</div><!-- #home-slide-wrapper -->
Replace
<img src="<?php echo $resized_image_src; ?>" alt="<?php echo $slide->post_title; ?>" />
with
<a href="<?php echo $link; ?>">
<img src="<?php echo $resized_image_src; ?>" alt="<?php echo $slide->post_title; ?>" />
</a>
I'm doing an slider image by using the plugin OwlCarousel2
I have added the JavaScript and CSS files that they provide on the website.
I'm also setup this on WordPress custom theme. I having a hard time trying to figure out how to setup my own custom Jquery.
Custom animation
jQuery(document).ready(function() {
$(document).ready(function(){
$('.owl-carousel').owlCarousel();
Boolean: false,
Number: 10
});
});
Wordpress Slider Image with Advanced Custom Gallery/Checkbox Fields
<?php $images = get_field('image_carousel'); ?>
<?php $activate_carousel_array = get_field( 'activate_carousel' ); ?>
<?php if( $images ): ?>
<?php if ( $activate_carousel_array ):
foreach ( $activate_carousel_array as $activate_carousel_item ):
echo $activate_carousel_item; ?>
<?php
$images = get_field('image_carousel');
if( $images ): ?>
<div id="hero">
<div class="slider owl-carousel owl-theme">
<?php foreach( $images as $image ): ?>
<div><img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
<?php endforeach; ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
<?php endif; ?>
In your code you use
jQuery(document).ready(function() and
$(document).ready(function()
remove one of them.
I wanted to show some lightbox funtionality with the use of shortcodes. The code is working fine except for the data shown in the ligthbox. It only shows the data from the latest post in the loop. How can i manage to get lightbox showing the data belonging to the post?
<?php
// Posts are found
if ( $posts->have_posts() ) {
while ( $posts->have_posts() ) :
$posts->the_post();
global $post;
?>
<center>
<div id="su-post-<?php the_ID(); ?>" class="su-post">
<?php if ( has_post_thumbnail() ) : ?>
<a class="su-post-thumbnail" href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
<?php endif; ?>
<div class="su-post-excerpt">
<!-- Shows the button and the hidden lightbox -->
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showInfo"][su_button] Info[/su_button][/su_lightbox]'); ?>
<!-- Shows the lightbox if button is clicked with the data -->
<?php echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showVideo"][su_button] Video[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showVideo"][su_video url="{su_meta key=video}"][/su_lightbox_content]'); ?>
<?php echo do_shortcode ('[su_lightbox type="inline" src="#showFoto"][su_button] Foto[/su_button][/su_lightbox]'); ?>
<?php echo do_shortcode ('[su_lightbox_content id="showFoto"][su_meta key="fotos" default="Geen fotos"][/su_lightbox_content]'); ?>
</div>
</div>
</center>
<?php
endwhile; echo do_shortcode ('[su_lightbox_content id="showInfo"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]');
}
// Posts not found
else {
echo '<h4>' . __( 'Posts not found', 'shortcodes-ultimate' ) . '</h4>';
}
?>
By adding a counter in the while loop and using the variable in the shortcode SRC and ID fields. I needed unique ID's for each post.
$n = 0; /* Outside While Loop */
echo do_shortcode( '[su_lightbox type="inline" src="#showInfo'.$n.'"][su_button] Info[/su_button][/su_lightbox] ');
echo do_shortcode( '[su_lightbox_content id="showInfo'.$n.'"][su_meta key="info" default="Geen tekst"][/su_lightbox_content]' );
$n++; /* Inside While Loop */
Hi guys really need some help on this issue. I've searched all over but cant find any solution.
Using http://www.starplugins.com/cloudzoom/quickstart to add hover zoom feature on single product page. Rollover on first product thumbnail shows the same image. However on second or subsequent rollover of other images the rollover image is always the 1st image.
Media.phtml
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$_nativeZoom = false;
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="more-views">
<?php /* <h2><?php echo $this->__('More Views') ?></h2> */ ?>
<?php
$galleryImages = $this->getGalleryImages();
$numGalleryImages = count($galleryImages);
$i = 0;
foreach ($galleryImages as $_image): $i++; ?>
<div class="<?php
if($i == 1) {
echo 'first';
}
if($i == $numGalleryImages) {
echo 'last';
}
?>">
<a href="#" data-large-image="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>"
title="<?php echo $_product->getName();?>">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(124); ?>"
alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
</a>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<div id="main-image">
<?php
$_img = '<img class="cloudzoom" id="main-product-image" src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(450).'" data-cloudzoom="zoomImage: \''.$this->helper('catalog/image')->init($_product, 'image').'\'" alt="'.$this->escapeHtml($_product->getImageLabel()).'" title="'.$this->escapeHtml($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</div>
<script type="text/javascript">
jQuery('.more-views a').click(function(){
jQuery('#main-product-image').attr('src', jQuery(this).attr('data-large-image'));
return false;
});
</script>
jquery initialize script
jQuery(document).ready(function($) {
if (jQuery('.catalog-product-view').length) {
if (window.location.hash == '#_reviews') {
//add scroll to down to product reviews list when pagination is used
jQuery.scrollTo(jQuery('#reviews'), {duration: 1000, interrupt: true});
}
//cloudzoom configuration http://www.starplugins.com/cloudzoom/quickstart
$('#main-product-image').CloudZoom({
tintColor: '#6e4d56',
tintOpacity: 0.43,
zoomSizeMode: 'image',
autoInside: 1000
});
}
});