I have a number of products, which will be displayed in different categories when ticked.
Now, what I am trying to achieve, is certain images to be shown depending on which categories are clicked.
Example.
IF I clicked category A, then an image (A) would be shown.
I am doing this as the code shows below.
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
<?php
$terms = wp_get_post_terms( get_the_id(), 'type' );
$term_class = '';
if ( isset( $terms[0] ) ) {
$term_class = $terms[0]->slug;
}
?>
<ul>
<li class="linoheight" style="margin-left:45px !important;"><img class="<?php echo $term_class; ?>-new" src="<?php bloginfo('stylesheet_directory'); ?>/images/acoustic-icon-small.png" alt="" width="30px" height="30px" style="display:none;"></li>
<li class="linoheight"><img class="<?php echo $term_class; ?>-new" src="<?php bloginfo('stylesheet_directory'); ?>/images/hard-wired-icon-small.png" alt="" width="30px" height="30px" style="display:none;"></li>
<li class="linoheight"><img class="<?php echo $term_class; ?>-new" src="<?php bloginfo('stylesheet_directory'); ?>/images/radio-icon-small.png" alt="" width="30px" height="30px" style="display:none;"></li>
</ul>
So, this will get the checkbox which is selected, and then create the class 'categoryA-new.
In the CSS, this category will be display:block, which displays the icon.
Now, the issue I am having, is that <?php echo $term_class;?>-new is only getting one of the categories, which means if category A is selected, then category B and C are still showing images.
I have a feeling this is an issue with the loop, does anyone have any ideas?
You just need to hide and show the object if onclick then a unique id of that item should be passed to some jquery or javascript function and they will show the item eg,
if I have
item 1item 2item 3
these three fields have unique id,s in them like
for 1- 2- etc you need to use jquery hit like this after placing some unique id at the ul like first to catch the in between li,s :
$("#list-of-items li").click(function(){
var current_clicked_li_index = $(#list-of-items li).index(this);
// now use .each loop in jquery
$("#list-of-items li img").each(function( Loopindex ) {
if(current_clicked_li_index != Loopindex){
$(this).hide();
}else{
$(this).show();
}
});
});
Note: don't forget to use the jquery library.
Related
I'm trying to loop a piece of jQuery code inside a foreach loop. Each article in the loop have a phone number custom post type related (ACF). At this point the loop works well.
As you see, the jQuery code only replace an image to another while user clicks in order to show the number (Ex : "Display Phone Number" image, becomes "555-555-1234").
The problem is that when I click in any image to display number...all articles show their phone number at the same time. I think is an ID problem in my jQuery code. After two days of searching and testing different codes this problem still not resolved yet.
Any suggestions/tracks will be very welcome !
Thanks
====
Things I have tried :
I have tried to put the jQuery code outside the foreach (same result)
I have tried to change the id image into a class (works better)
I have tried different jQuery functions (replaceWith(), show(), etc)
foreach ($related_posts_articles as $related_post ){
<div class="col-sm-6 col-md-6 col-lg-3 col-xs-12">
<div>
<a href="<?php echo get_permalink($related_post->ID); ?> ">
<?php echo get_the_post_thumbnail($related_post->ID,"square-300",array('class' => 'img-responsive')); ?>
</a>
<div>
<a href="<?php echo get_permalink($related_post->ID); ?>">
<h2>
<?php echo wp_html_excerpt(strip_tags(get_field('acf_titre_mini', $related_post->ID)), 30, '...' ); ?>
</h2>
</a>
<div>
<?php echo wp_html_excerpt( strip_tags(get_field('acf_description_mini',$related_post->ID)), 129, '...' ); ?>
</div>
<!-- START bloc number -->
<?php if( get_field('acf_numero_image', $related_post->ID) ): ?>
<div>
<img class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
<script>
jQuery(document).ready(function($) {
$( ".input_img" ).click(function() {
$( ".input_img" ).attr( "src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
});
});
</script>
</div>
<?php endif; ?>
<!-- END bloc number -->
</div>
</div>
</div>
}
Take note of the 'this' Context
When an event fires in jquery the callback function this context is set to the element which the event was fired from.
jQuery(document).ready(function($) {
$(".input_img").click(function() {
// Use `this` to target the event element
$(this).attr("src", "<?php the_field('acf_numero_image', $related_post->ID); ?>" );
});
});
Advice:
You shouldn't generate same jquery code inside each iteration of the for each. Since you're repeating unnecessary code. You can harness HTML data-* attributes to achieve the outcome you seek.
You are giving the class name the same for all images. Also by looping you are adding lot's of scripts. You can add Onclick events to image and create a function and grab the data and do you things. Also, you can add extra attributes to img tag to get your data. Also try to put different ID like below,
foreach ($related_posts_articles as $key=>$related_post ){
<img id="img-<?php echo $key; ?>" onclick="myFunction(this)" class="input_img" src="<?php the_field('acf_btnVoirNum_image', $related_post->ID); ?>" >
}
I'm building a work portfolio using a WordPress category feed and jQuery to show some effects when you hover over a portfolio example. I would like to iterate using jQuery and a WordPress feed so the effect works for each of my portfolio examples... I have successfully done this for the first example in my portfolio, however getting it to work on each portfolio example is proving challenging. I understand each portfolio example needs a unique identifier but I don't understand how to apply it to each one. Please see the code below thank you for helping me
JS:
$(document).ready(function() {
$('div.recentWork').hover(function(){
$(".links").stop(1).slideDown();
$(".imagio").fadeOut();
},function(){
$(".links").stop(1).slideUp();
$(".imagio").fadeIn();
});
});
PHP:
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php
if(has_post_thumbnail($post->ID)){
$thumbsrc = get_the_post_thumbnail($post->ID,'medium');
}else{
$thumbsrc = "<img src=\"images/no_featured_image.jpg\" style=\"width:100%;height:180px;\">";
}
$url = get_post_meta($post->ID, "URL", true);
$website = get_post_meta($post->ID, "Website", true);
?>
<div class="recentWork">
<div class="links">
<img src="<?php bloginfo('url'); ?>/images/icons/icon_zoom.png" /><img src="<?php bloginfo('url'); ?>/images/icons/icon_more.png" /><br />
<?php the_title(); ?>
</div>
<div class="imagio">
<?php echo $thumbsrc; ?>
</div>
</div>
<?php endwhile; ?>
Uses class selectors
$('.className')
or node selectors
$('div')
or both
$('div.className')
Then inside of your hover handler, use
$(this)
e.g.
$(document).ready(function() {
$('div.recentWork').hover(
function(){
$(this).find('.imagio').fadeOut();
$(this).find('.showLinks').fadeIn();
},
function(){
$(this).find('.imagio').fadeIn();
$(this).find('.showLinks').fadeOut();
}
);
});
I have a PHP and a jQuery script that I use to display a few images. A large image on the left side and 4 thumbnails on the right side. Each time the user clicks an image-thumbnail it will show up on the large image placeholder on the left side.
This is the PHP code I'm using to display the large image and thumbnails:
<div class="pic"><img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->imageURL; ?>" />
</div>
<ul class="ngg-gallery-list-ir">
<!-- Thumbnail list -->
<?php foreach ( $images as $image ) : ?>
<?php if ( $image->hidden ) continue; ?>
<li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
</li>
<?php endforeach; ?>
This is the jQuery I'm using to update the large image when an user clicks on any thumbnail-image:
jQuery(document).ready(function($){
// handle the click of thumbnail images
// redirect it to change the main image
$(".ngg-thumbnail-list a").click(function(){
var src = $(this).attr("href");
$(".ngg-galleryoverview-ir .pic img").attr("src", src);
return false;
});
// preload the large images
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
// populate the list of images to load
preload(images);
});
Everything works fine in this setup but I also need to display below the main large-image its title and description. This is the code I'm using:
<div class="container-title-description">
<div class="title"><?php echo $current->alttext ?></div>
<div class="descripton"><?php echo $current->caption ?></div>
</div>
The problem is this: if I add this code inside the foreach loop I get the title and description below each thumbnail-image. If I add this code outside the foreach loop when the main image changes the title and description will stay the same. How can I solve this?
You can view how this setup looks like on this website.
You already add the title and description as hidden title attributes inside the anchor element, so just extract them and update the HTML on demand:
$(".ngg-thumbnail-list a").click(function(){
var src = $(this).attr("href"),
desc = $(this).attr('title'),
title = $(this).find('img').attr('title');
$(".ngg-galleryoverview-ir .pic img").attr("src", src);
$('.container-title-description .title').text(title);
$('.container-title-description .description').text(desc);
return false;
});
Initial HTML (outside your foreach loop):
<div class="container-title-description">
<p class="title"></p>
<p class="description"></p>
</div>
i'm trying to get a slider to feature my images that are in a post. I currently have everything set up but I only have one li element that is showing all three images. I'd love to have three li elements each showing one image but I can't figure out how to automatically isolate each image. Any help would be greatly appreciated!
you can see the current state here:
http://mksgear.com/shop/test-product/
this is what my code looks like:
<ul class="slides">
<li class="slide">
<?php if ( has_post_thumbnail() ) : ?>
<?php echo do_shortcode('[gallery option1="value1"]'); ?>
<?php else : ?>
<img src="<?php echo woocommerce_placeholder_img_src(); ?>" alt="Placeholder" />
<?php endif; ?>
</li>
</ul>
I'm not sure I understand your question correctly, but I'll give an answer a go. If I have misunderstood what you're trying to do please clarify it for me and I'll update my answer.
You can use itemtag="li" inside the gallery shortcode to wrap each image in an li. You'd need to remove your <li class="slide"> line of code, and maybe use jQuery to add the "slide" class back to the generated li tags. So you could do something like this:
Also, does your code render the gallery when using the : in the if/else statement?
<script>
jQuery(document).ready(function() {
jQuery("#slides li").addClass("slide");
});
</script>
<ul class="slides">
<?php if ( has_post_thumbnail() ) { ?>
<?php echo do_shortcode('[gallery itemtag="li" option1="value1"]'); ?>
<?php } else { ?>
<img src="<?php get_bloginfo( 'stylesheet_directory' ); ?>/images/thumbnail-default.jpg" />
<?php } ?>
</ul>
Add this you your footer, you can add it inside the same document.ready as the jQuery to add the class slide. Just copy and paste this on a new line right after jQuery("slides li").addClass("slide");. You can adjust the height, width, or any other options in this call if you need to. This will hopefully work.
jQuery("#slides").advancedSlider({
width: 900,
height: 460,
responsive: 1,
skin: 'light-round'
});
I'm using custom meta data to display images as a post in wordpress. When I click the image on my main page it opens in colorbox and this is perfect.
WHAT IS HAPPENING : now, with the image loaded into the colorbox, when I click on the image it cycles through the images on my home page ( NOT what I would like ).
WHAT I WOULD LIKE TO HAPPEN : with the image loaded into the colorbox, when I click on it, it will act as a link and load the post ( associated with that image ) into the colorbox.
I'm not clear on how to do this. The code I'm using to display the image meta data for the posts is:
<?php
// check for spine image
$spine = get_post_meta($post->ID, 'spine image', $single = true);
// check for spine class
$spine_class = get_post_meta($post->ID, 'spine class', $single = true);
?>
<div style=" #position: center; #left: 50%; height: 650px; display: table-cell; vertical-align: middle;">
<div class="post" id="post-<?php the_ID(); ?>">
<div class="entry">
<?php
// If there is a spine image, display it as the post
if($spine !== '') { ?>
<p>
<a rel="bookmark" href="<?php echo $spine; ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php echo $spine; ?>" class="<?php if($spine_class !== '') { echo $spine_class; } else { echo "left"; } ?>"
height="400" onMouseOver='resizeImg(this, 150)' onMouseOut='resizeImg(this)'
/>
</a>
</p>
<?php } // end if statement
// if there's not a spine image
else { echo ''; }
?>
</div>
</div>
</div>
And the function I'm using for colorbox is:
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='bookmark']").colorbox({transition:"fade"});
});
</script>
So that the links with the attributes of 'bookmark' will open in the color box. How now can I make it so that the image in the colorbox links to the associated web page ( or act as a link to any web page... one step at a time )?
I hope this makes sense and thank you for any help,
mlord
My question seems overly complicated once I realized how to do this.
The end result is that I used the ".inline" HTML structured example from the website ( http://colorpowered.com/colorbox/core/example4/index.html ). I can put the image from the wordpress loop href'd to the permalink and call it inline for each image / post to be displayed in the colorbox. Then I included the general colorbox class on that link which opens the post inside of the colorbox as well. Awesome!
Keep care,
Matthew