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>
Related
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.
So basicly i need to run a php function inside a thumbnail-list . When outside list and using only "text", it works. But if i convert to image, stops working and if inside the list doesn't work.When i press only main button works.
Function in question is ""
<div class="thumbnail-list">
<ul data-role="listview" data-filter-theme="d" data-inset="true">
<?php while ( have_posts() ) : the_post(); ?>
<?php
if(get_option_tree('blog_exce','', false)!="")
$length=get_option_tree('blog_exce','', false);
else
$length=100;
$image_url=wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) );
$id = get_post_meta(get_the_ID(), 'my_meta_box_text', true);
if($id!="")
?>
<li id="post-<?php the_ID(); ?>" <?php post_class("ui-btn-icon-right"); ?>>
<div class="ui-btn-inner ui-li" aria-hidden="true">
<div class="ui-btn-text">
<a data-ajax="false" class="ui-link-inherit" href="<?php the_permalink() ?>">
<p class="ui-li-aside ui-li-desc" ><?php the_time('Y-m-d') ?></p>
<?php if($id!="") {?>
<img class="ui-li-thumb" src="<?php echo $image_url; ?>" />
<?php }else {
if($meta2!="on"){?>
<div class="ui-li-thumb"><img style="display:none" class="blog_crop" src="<?php echo $image_url ; ?>" /></div>
<?php }else{?>
<div class="ui-li-thumb"><img style="max-height:80px;max-height:80px;" src="<?php echo $image_url ; ?>" /></div>
<?php }} ?>
<h3 class="ui-li-heading"><?php the_title()?></h3>
<a data-ajax="false" <?php wpfp_remove_favorite_link(get_the_ID());?> <img src="https://mywebsite.com/wp-content/uploads/2020/04/delete.png"></a>
</a></div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
</div>
</li>
This is what i have
This is what i want.
Thank you all for the help!...
Note: the function removes post and refreshes page and needs be data-ajax="false"
the word "Remover" is the button
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 starting out with PHP for a WordPress and have written some code to put some social network icons in the footer. The way I have done it works, I'm simply calling the content of social network URL stored in the DB and if there is something the icon/link in the footer. But looks very inefficient to me, here is the code, does anyone know how to make it more efficient.
<?php
$social1 = of_get_option('fab_social_twitter_url');
$social2 = of_get_option('fab_social_facebook_url');
$social3 = of_get_option('fab_social_linkedin_url');
?>
<!-- divs for right social network icons column -->
<div class="eight columns">
<div class="social">
<ul>
<?php
if(!empty($social1)) {
?>
<li><img src="<?php echo of_get_option('fab_social_twitter_icon'); ?>" alt="Follow us on Twitter"></li>
<?php
}
?>
<?php
if(!empty($social2)) {
?>
<li><img src="<?php echo of_get_option('fab_social_facebook_icon'); ?>" alt="Follow us on Facebook"></li>
<?php
}
?>
<?php
if(!empty($social3)) {
?>
<li><img src="<?php echo of_get_option('fab_social_linkedin_icon'); ?>" alt="Follow us on Linkedin"></li>
<?php
}
?>
</ul>
</div>
</div>
Maybe:
<!-- divs for right social network icons column -->
<div class="eight columns">
<div class="social">
<ul>
<?php
foreach (array("twitter","facebook","linkedin") as $option)
($tmp=of_get_option('fab_social_'.$option.'_url')) && (print('<li><img src="'.of_get_option('fab_social_'.$option.'_icon').'" alt="Follow us on '.ucfirst($option).'"></li>'));
?>
</ul>
</div>
</div>
From a performance point of view, I don't think that there is anything to optimize in here, three separate cases tested individually
<?php
$social1 = of_get_option('fab_social_twitter_url');
$social2 = of_get_option('fab_social_facebook_url');
$social3 = of_get_option('fab_social_linkedin_url');
$icon1 = of_get_option('fab_social_twitter_icon');
$icon2 = of_get_option('fab_social_facebook_icon');
$icon3 = of_get_option('fab_social_linkedin_icon');
?>
<!-- divs for right social network icons column -->
<div class="eight columns">
<div class="social">
<ul>
<?php if(!empty($social1)) { ?>
<li>
<a href="<?php echo $social1; ?>">
<img src="<?php echo $icon1; ?>" alt="Follow us on Twitter">
</a>
</li>
<?php } ?>
<?php if(!empty($social2)) { ?>
<li>
<a href="<?php echo $social2; ?>">
<img src="<?php echo $icon2; ?>" alt="Follow us on Facebook">
</a>
</li>
<?php } ?>
<?php if(!empty($social3)) { ?>
<li>
<a href="<?php echo $social3; ?>">
<img src="<?php echo $icon3; ?>" alt="Follow us on Linkedin">
</a>
</li>
<?php } ?>
</ul>
</div>
</div>
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>