div class="gallary">
<div class="container">
<div class="gallary-detail">
<div class="gallary-for">
<?php
if(have_rows('gallery')):
while(have_rows('gallery')): the_row(); ?>
<div class="gallary-image">
<?php $gal = get_sub_field('gallery_images');?>
<figure>
<a href="<?php echo $gal['url']; ?>" data-fancybox="gallery" data-caption="Optional caption">
<img src="<?php echo $gal['url']; ?>" alt="<?php echo $gal['alt']; ?>" />
</a>
</figure>
</div>
<?php endwhile; endif; ?>
</div>
<div class="gallary-nav">
<?php
if(have_rows('gallery')):
while(have_rows('gallery')): the_row(); ?>
<div class="gallary-image">
<?php $gal = get_sub_field('gallery_images');?>
<figure>
<a href="<?php echo $gal['url']; ?>" data-fancybox="gallery" data-caption="Optional caption">
<img src="<?php echo $gal['url']; ?>" alt="<?php echo $gal['alt']; ?>" />
</a>
</figure>
</div>
<?php endwhile; endif; ?>
</div>
</div>
</div>
</div>
Can anyone make the above code corrected so that duplicate images in thumbnails don't show and the slider stops when all images are seen? Right now there are 3 images uploaded using ACF but thumbnails show 6 images each image repeats one time and the slider doesn't stop instead it loops the images from 1-6.
Related
I'm using bxslider to show images from the database, it works but the thumbnails of the caroussels isn't clickable.
This is the code what I use;
<?php if ($object->fotos->has()): ?>
<ul class="bxslider">
<?php foreach ($object->fotos as $foto): ?>
<?php $photo = wp_get_attachment_image_src($foto->ID, 'large'); ?>
<li><img src="<?= $photo[0] ?>"></li>
<?php endforeach; ?>
</ul>
<div id="bx-pager">
<?php foreach ($object->fotos as $foto): ?>
<?php $photo = wp_get_attachment_image_src($foto->ID, 'thumbnail'); ?>
<a data-slide-index="0" href=""><img src="<?= $photo[0] ?>" /></a>
<?php endforeach; ?>
</div>
<?php endif; ?>
I tried:
<div id="bx-pager">
<?php foreach ($object->fotos as $foto): ?>
<?php $photo = wp_get_attachment_image_src($foto->ID, 'thumbnail'); ?>
<a data-slide-index="0" href=""><img src="<?= $photo[0] ?>" /></a>
<a data-slide-index="1" href=""><img src="<?= $photo[1] ?>" /></a>
<a data-slide-index="2" href=""><img src="<?= $photo[2] ?>" /></a>
<?php endforeach; ?>
</div>
This is clickable but it doesn't show the image. How can I make the thumbnail images clickable?
Check This
http://jsfiddle.net/L5S2B/2/
I think it should be work, If its not than feel to get back
Below is the HTML and grab Javascript from Fiddle
<!-- slider 1 -->
<ul class="bxslider">
</ul>
<!-- custom controls -->
<div class="bxslider-controls">
<a class="pull-left" href="#">PREV</a>
<a class="pull-right" href="#">NEXT</a>
</div>
I'm having a very strange issue that I can't figure out. I'm working on a custom theme in wordpress and I've got a div with an image and another icon image inside.
I'm trying to make both the whole image and the icon image within it a link.
The issue is that when I try to put a link around the whole div, Wordpress closed the link prematurely and then adds a second link - neither of which are actually enclosing my div.
If I change the div to a span, it will let me wrap it in a link. Why?! What is going on and how and I turn off this 'feature'?
Here is the selected code in my template file:
<a href="<?php the_permalink(); ?>">
<div class="img">
<?php if (has_post_thumbnail()): ?>
<img style="display: none;" src="<?php echo $image_attributes[0]; ?>" alt="<?php echo strip_tags(get_the_title()); ?>">
<span class="zoom hide-ie"><i class="fa fa-search"></i></span>
<?php endif; ?>
<?php if ($categories): ?>
<?php echo $categories[0]->cat_name?>
<?php endif; ?>
<div class="background" style="background-image: url('<?php echo $image_attributes[0]; ?>');"></div>
</div>
</a>
However, this is the code that is being outputted to the browser:
<a href="http:somelink">
</a>
<div class="img">
<a href="http:somelink">
<img style="display: none;" src="imagelink.jpg" alt="This isn’t our beautiful contest – how did we get here?">
<span class="zoom hide-ie"><i class="fa fa-search"></i></span>
</a>
Agency Mojo
<div class="background" style="background-image: url('http://imagelink.jpg');"></div>
</div>
So as you can see, it's closing the link immediately, and then adding another link inside of the `
Any help would be amazing as I've seen this question asked but not answered in a few other places including here on this site
I generally try to avoid nesting anchor tags. Perhaps something like this would work better.
<div class="img">
<?php if ( has_post_thumbnail() ): ?>
<a href="<?php the_permalink(); ?>">
<img style="display: none;" src="<?php echo $image_attributes[0]; ?>" alt="<?php echo strip_tags(get_the_title()); ?>" />
<span class="zoom hide-ie"><i class="fa fa-search"></i></span>
</a>
<?php endif; ?>
<?php if ($categories): ?>
<a href="<?php echo get_category_link($categories[0]-> term_id ); ?>" class="category-link">
<?php echo $categories[0]->cat_name; ?>
</a>
<?php endif; ?>
<a href="<?php the_permalink(); ?>">
<div class="background" style="background-image: url('<?php echo $image_attributes[0]; ?>');"></div>
</a>
</div>
Trying to open a new fancybox within a fancybox using "fancybox-hidden"? Using the Sirius Wordpress theme. My code is below. Any hints would be great.
<img src="<?php echo $small_image_url[0]; ?>" alt="" class="portfolio_img"/>
<!-- MATTSTER ADDED NEW ACTION TAG FOR LIGHTBOX AND NEW POST EXCERPT -->
<a class="fancybox-thumb" rel="gallery-<?php echo $post->ID; ?>" data-fancybox-group="fancybox-thumb" href="<?php echo $image_url[0]; ?>">
<div class="mask">
<div class="mask_frame">
<div class="mask_image_content">
<div class="mask_image_content_frame">
<h6><?php echo get_the_title(); ?></h6>
<span><?php echo strip_tags(pp_get_the_excerpt($portfolio_ID)); ?></span>
</div>
</div>
</div>
</div>
</a>
<div class="mancy">
<a class="fancybox-thumb" rel="gallery-<?php echo $post->ID; ?>" data-fancybox-group="fancybox-thumb"><img src="<?php echo $image_url[0]; ?>" /></a>
</div>
This is my WordPress loop code... :)
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<?php if (is_category('instagram')) {?>
<?php
$__width = '225';
$__height = '225';
?>
<div id="instagram-photos">
<a href="<?php the_permalink() ?>"class="instagram-photo">
<div class="photo"><?php custom_get_post_attachments(get_the_ID(), $__width, $__height, get_the_title()); ?> </div>
</a>
</div>
<?php }elseif(is_category('runway')) { ?>
<?php
$__width = '298';
$__height = '500';
?>
<div id="runway-category">
<a href="<?php the_permalink() ?>" class="runway-category-posts">
<div class="photo"><?php custom_get_post_attachments(get_the_ID(), $__width, $__height, get_the_title()); ?><div class="runway-title"><?php the_title(); ?></div></div>
</a>
</div>
<?php } elseif(is_category('')){?>
<article <?php post_class(); ?>>
<div class="latest-posts">
<div class="latest-posts-info">
<div class="title"><h1><?php the_title(); ?><h1></div>
<div class="text">
<?php the_excerpt(); ?>
</div>
<div class="post-share">
<div class="facebook-like" style="float:left;">
<img src="<?php echo get_template_directory_uri(); ?>/images/facebook-icon.png" />
</div>
<div class="twitter-follow" style="float:left;">
<a href="http://twitter.com/share?text=<?php the_title(); ?>&url=<?php the_permalink() ?>" target="_blank" ><img src="<?php echo get_template_directory_uri(); ?>/images/twitter-icon.png" /></a>
</div>
<div class="google-share">
<a href="https://plus.google.com/share?url=<?php the_permalink() ?>" target="_blank" ><img src="<?php echo get_template_directory_uri(); ?>/images/google-icon.png" /></a>
</div>
</div>
<div class="clear"></div><div class="post-read-more">Read More</div>
<div class="clear"></div>
</div>
<div class="latest-posts-img">
<?php //echo get_the_post_thumbnail(); ?>
<?php custom_get_post_attachments(get_the_ID(), $__width, $__height, get_the_title()); ?>
</div>
<div class="clear"></div>
</div>
</article>
<?php }?>
<?php endwhile; else: ?>
<div class="content">
<p class="not-found-p">No articles found!</p>
</div>
<?php endif; ?>
As you see I have few conditions as is_category('instagram').
The thing is: I need to limit the post quantity in exact category, not at all them.
How can I do that?
i am uncertain if we can do this in a wordpress way .. but here is the workaround --
$no_of_posts = 5;
$post_counter = 0;
if(is_Category('instagram') && ($no_of_posts<=$post_counter)) {
// bunch of code
$post_counter++;
}
untested but something like could get you going
I am using this slider gallery. i have problem while showing thumbs of images.
i used while loop only on UL and li tags, when i end while loop after thumbs. it will show all images in main image box.. can any one tell me how i can use this gallery in my php code
<div class="image-gallery">
<?php if($pic_count > 0){ ?>
<div id="wowslider-container1">
<div class="ws_images">
<?php while(!$rs_img_gallery->EOF) { ?>
<ul>
<li><img src="<?php echo MYSURL;?>img.gallery/<?php echo $rs_img_gallery->fields['image'] ?>" alt="" id="wows1_0"/></li>
</ul>
<?php $rs_img_gallery->MoveNext();
} // end while(!$rs_dc_gallery->EOF) ?>
</div>
<div class="ws_thumbs">
<div>
<img src="<?php echo MYSURL;?>img.gallery/<?php echo $rs_img_gallery->fields['image'] ?>" alt="" width="120" height="90"/>
</div>
</div>
</div>
<?php }else{
echo "<div class='notification information png_bg' style='width:90%;'>
<div>
".$infomsg['msg164']."
</div>
</div>";
}?>
</div>
You should take the <UL> out of the while loop
<div class="ws_images">
<ul>
<?php while(!$rs_img_gallery->EOF) { ?>
<li>
<img src="<?php echo MYSURL;?>img.gallery/<?php echo $rs_img_gallery->fields['image'] ?>" alt="" id="wows1_0"/>
</li>
<?php
$rs_img_gallery->MoveNext();
} // end while(!$rs_dc_gallery->EOF)
?>
</ul>
</div>