I'm trying to just add an .active class to a sidebar div when it is on that page.
You can see the example here: http://nsiprojects.voodoodev3.co.uk/?page_id=193 which is literally only highlighting the first div as opposed to the active div.
<div class="mezzanine-sub">
<?php
$childpages = query_posts('orderby=menu_order&order=asc&post_type=page&post_parent=35');
if($childpages) { /* display the children content */
foreach ($childpages as $post) :
setup_postdata($post) ?>
<script type="text/javascript">
$(function() {
var current = location.pathname;
$('.mezzanine-sub a').each(function() {
var $this = $(this);
// if the current path is like this link, make it active
if ($this.attr('href').indexOf(current) !== -1) {
$this.addClass('active');
}
})
})
</script>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="mezzanine-sub-title">
<span><?php the_title(); ?></span>
<a>
<!-- post thumbnail -->
<?php
global $post; ?>
<?php
$src = wp_get_attachment_image_src(get_post_thumbnail_id($post -> ID), array(5600, 1000), false, '');
?>
<div class="mezzanine-sub-image" style="background: url(<?php echo $src[0]; ?> );border:<?php the_field('border'); ?>;"></div>
<!-- /post thumbnail -->
<!-- post title -->
<?php
endforeach;
} ?>
</div>
No need to use any jQuery/JavaScript code.
You can apply active class by comparing the page_id that exists as query string.
<div class="mezzanine-sub">
<?php
$childpages = query_posts('orderby=menu_order&order=asc&post_type=page&post_parent=35');
if ($childpages)
{
// Display the children content
foreach ($childpages as $post)
{
setup_postdata($post)
?>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="mezzanine-sub-title <?php echo!empty($_GET['page_id']) && $_GET['page_id'] == $post->ID ? "active" : NULL ?>">
<span><?php the_title(); ?></span>
<a>
<?php
global $post;
$src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), array(5600, 1000), false, '');
?>
<div class="mezzanine-sub-image" style="background: url(<?php echo $src[0]; ?> );border:<?php the_field('border'); ?>;">
</div>
</a>
</a>
<?php
}
}
?>
</div>
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%');
});
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.
I'm trying to give each ID in the loop a unique ID.
Like: check-1, check-2 etcera.
But it is not working .
Here is my code:
<?php
if( have_rows('activiteiten_knoppen') ): $count=0;?>
<?php while(have_rows('activiteiten_knoppen') ): the_row();
$meer_info = get_sub_field('meer_info');
$tijd = get_sub_field('reserveren');
?>
<p class="activiteitInfo"><a class="fancybox-inline" style="color: #f3f3f3 !important;">Meer info</a></p>
<p class="activiteitReserveer"><a style="color: #f3f3f3 !important;" href="<?php echo $tijd; ?>">Reserveren</a></p>
<div id="check-<?php echo $count ?>" style="display: none;"><?php echo $meer_info; ?></div>
<script>
$(document).ready(function () {
$(".activiteitInfo").click(function () {
$(".hoi").css("display", "block");
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>
I used lightgallery for my photo albums. The problem is when clicking the photo the popup opens but it is trying to get the tagged text in the photo album. How can i block it ?
<div class="lightgallery">
<a href="<?php echo HTTP_RESIM.'products/'.$product['image']; ?>">
<img src="<?php echo HTTP_RESIM.'products/'.$product['image']; ?>" ></a>
<h5><?php echo $product['name']; ?></h5>
<?php
$query = "SELECT * FROM product_image WHERE product_id = '".$product['id']."' AND status = '1' ORDER BY sort_order";
$productImages = mysql_query($query);
while($productImage = mysql_fetch_array($productImages)){
?>
<a href="<?php echo HTTP_RESIM.'product_image/'.$productImage['image']; ?>">
<img src="<?php echo HTTP_RESIM.'product_image/'.$productImage['image']; ?>" >
</a>
<?php
}
?>
</div>
<?php } ?>
<script type="text/javascript">
$(document).ready(function() {
$(".lightgallery").lightGallery();
});
</script>
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
});
}
});