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'
});
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 am using 'Aqua Resizer' (aq_resizer.php) to resize my thumbnails on my Wordpress site. My posts are made from a loop in single.php with
<?php get_template_part( 'content', 'single' ); ?>
This pulls from content-single.php which has the code for my posts
HTML
<div id="post-<?php the_ID(); ?>" <?php post_class('col-md-12'); ?> >
<div>
<h2><?php the_title(); ?></h2>
<h3><?php the_category(', '); ?></h3>
<?php the_content(); ?>
</div>
<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image
?>
<?php if($image) : ?>
<img class="img-responsive" src="<?php echo $image ?>"/>
<?php endif; ?>
</div><!-- /#post -->
Everything works fine (the resizer function works on the featured post which is brought in with <?php the_content(); ?>. The image scales up/down as the window resizes
The effect works because class="img-responsive" is applied to the featured-image of the post.
I have images in the content of the post. I want them to act the same way (right now they are just brought in at their original size) I need the class img-responsive to be applied to the images in <?php the_content(); ?>
Applying the CSS classes to images can be done from within the post itself, just edit the image and put CSS class img-responsive.
If you cannot edit/modify posts (or it is just too much work) then second option is to write a small code snippet in your theme's custom function.php file (this is true only when you display post in your loop):
<?php
the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));
See https://codex.wordpress.org/Function_Reference/the_post_thumbnail for more details.
And the third option is to use jQuery in your header.php file, this way all images on page will get responsive class (however this may not be what you want, especially if you have backgrounds, logos, menu images, etc. and it will require JavaScript to be enabled in client's browser):
<script type="text/javascript">
jQuery(function() {
jQuery(img).addClass('img-responsive');
});
</script>
The last option I can think of, is by using pure CSS:
.content img { height: auto; max-width: 100%; }
Where .content is the area that contains your post content.
Note: You may also want to override the .wp-caption class as well like so.
.wp-caption { width: auto !important; }
Is it possible to use the_content() excluding the galleries? I want to make this because I need the gallery displayed with flexslider. I already integrate flexslider. If I want to show the content of the post, for example: some text, separated images and of course a gallery. It will display the gallery with flexslider and then the content with the text, images and the gallery again. I don't want the gallery duplicated.
<div class="entry-content">
<?php $gallery = get_post_gallery( get_the_ID(), false );?>
<div class="flexslider flexslider-gallery">
<ul class="slides slides-gallery">
<?php foreach( $gallery['src'] AS $src ){ ?>
<li>
<img alt="Gallery image" src="<?php echo $src; ?>" />
</li>
<?php } ?>
</ul> <!-- end .slides -->
</div> <!-- end .flexslider -->
<?php the_content(); ?>
</div><!-- .entry-content -->
Ok here is the solution:
Add to functions.php
function remove_shortcode_from($content) {
$content = strip_shortcodes( $content );
return $content;
}
and then call it when you need, in my case in content-gallery.php:
add_filter('the_content', 'remove_shortcode_from');
the_content();
remove_filter('the_content', 'remove_shortcode_from')
Two ways:
1) The WordPress Gallery is contained in a div with class .gallery. If flexsider does not also use that class, you could simply set your CSS to:
.gallery { display: none; }
2) You could get the content with get_the_content, parse it using a DOM parser and delete the Gallery.
Option #1 is less efficient, but avoids the complexity of parsing the DOM.
Neither method is guaranteed to work if the site is use a non-standard gallery plugin that is creating non-WP HTML.
I have a application here: application
In the demo I am using a basic jquery slider which page is here: page info
Now the issue I am having is that it displays the images in question 1, but not in question 2. Now before I included the slider, it displayed the images in all questions. But since I included the slider, then it only displays images in first question only. How can I get images to be displayed in all questions?
CODE:
<form action='results.php' method='post' id='exam'>
<?php
foreach ($arrQuestionId as $key=>$question) {
?>
<div class='lt-container'>
<p><?php echo htmlspecialchars($arrQuestionNo[$key]) . ": " . htmlspecialchars($arrQuestionContent[$key]); ?></p>
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<div id="banner-slide">
<ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#banner-slide').bjqs({
animtype : 'slide',
height : 200,
width : 200,
responsive : true,
randomstart : true
});
});
</script>
<?php
}
//end:procedure image
?>
</div>
<?php
}
?>
</form>
You have two divs on the page with the same ID. #1 that is a no no and bad HTML. You will need to initiate your slider on each div independently.
$('#banner-slide1').bjqs({ //ETC
$('#banner-slide2').bjqs({ //ETC
Is that enough to understand where you went wrong and why it's not working. JQuery doesn't know which banner-slide to use, or it's actually only using the first one, because it knows there should only be one ID per page.
I don't know how your slider plugin works, but you may be able to change the ids to classes in the divs, and then start the slider with:
$('.banner-slide').bjqs({ //ETC
OR
$('.banner-slide').each(function(){
$(this).bjqs({ //ETC
It depends on how the plugin works.
Element ID should be unique to a single element. You are not allowed to give two elements the same ID. Try changing the IDs to banner-slide1 and banner-slide2.
We have a slider, we want to use. Dead simple stuff. But I need it to become a little more dynamic.
We have a blog roll, which runs and displays on a php loop, basically.. if we set the loop to 6.. it generates 6 sets of divs.
Now my thought is, put the DIV which displays the blog post within a slider, then we can display subsequent posts as each div refreshes.. kinda thing.. I am sure you know what I mean.
I have made a simple fiddle...
http://jsfiddle.net/ozzy/yEB4V/
Essentially, we only need ONE <li> to </li>
Reason is, we can plonk our php around the LI tags so that the loop works, and the slides get updated accordingly..
The issue I have is, the first time the LI is fired, it must not have display:none , for obvious reasons.. all the otehr subsequent occurences of the LI tags are hidden.
As you can see from the fiddle, all the LI tags have display none, apart from the first LI tag, so it shows that first, then loops to next and each one is updated.
script here;
var slider = function() {
$('#testimonials .slide').filter(':visible').fadeOut(1000,function(){
if($(this).next('li.slide').size()){
$(this).next().fadeIn(2000);
}
else{
$('#testimonials .slide').eq(0).fadeIn(1000);
}
});
};
var interval = setInterval(slider, 2000);
$('#testimonials .slide').hover(function() {
clearInterval(interval);
}, function() {
interval = setInterval(slider, 2000);
});
I wonder if anyone knows how to get around this... As our php code will be something like:
<ul id="testimonials">
<!-- OUR PHP LOOP-->
<li class="slide">
<div>
<h1><?php echo $title; ?></h1>
<p><?php echo $stuff; ?>
</div>
</li>
<!-- // PHP LOOP -->
</ul>
You could use jquery to make the first child visible.
$(document).ready(function(){
$('#testimonials :first-child.slide').show(0);
//.. rest of the stuff
});
And in the php, set all the divs to display:none
use:
<ul id="testimonials">
<?php foreach($lis as $li) { ?>
<li class="slide"<?php if($li == $lis[0]) echo ' style="display:list-item;"' ?>>
<div>
<h1><?php echo $title; ?></h1>
<p><?php echo $stuff; ?>
</div>
</li>
<?php } ?>
</ul>