I am attempting to install the masonry.js library into my website.
But no matter what I add/remove, Masonry just doesn't appear to align anything on the webpage.
This is my code:
<script>
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
</script>
And my HTML/PHP
<div class="container">
<div class="grid">
<div id="row" >
<?php foreach ($pages as $page): ?>
<div class="col-md-4 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="grid-item"><a href="<?php echo BASE_URL; ?>/page.php?page=<?php echo $page['slug']; ?>"><img alt="Article Image" class="img-responsive" src="<?php echo BASE_URL;?><?php echo $page['image']; ?>"></div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
Any assistance at all would be greatly appreciated, I've gone through several articles about installing Masonry with Bootstrap, but no matter what I attempt, it still refuses to align
http://imgur.com/C0nyUYq
Modified
<div class="grid">
To
<div class="grid js-masonry">
Which has now done the trick. :)
Related
I'm trying to pull an image to show in a slider, using ACF. No matter what I try, it won't work. Here's the backend code:
<?php get_header();?>
<?php $banner = get_field('banner');?>
<!-- Carousel Start -->
<div class="container-fluid p-0 wow fadeIn" data-wow-delay="0.1s">
<div id="header-carousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<?php $image = get_field('slider_image_1'); if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
<div class="carousel-caption">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<h1 class="display-2 text-light mb-5 animated slideInDown"><?php echo $banner['headline_1'];?></h1>
Our Services
</div>
</div>
</div>
</div>
</div>
I've tried different codes. Image will not show.
It's my first time working with wordpress, ACF and PHP, and well, I've
been in this trouble for days, does anyone know what's going wrong for
the Loop not working?
<div class="swiper">
<div class="swiper-wrapper">
<?php
foreach (get_field('fleet_slides') as $fleet_slide) {
$image = $fleet_slide['image_slide']['url'];
?>
<div class="img-wrapper">
<!-- Slides -->
<div class="swiper-slide">
<img src="<?php echo $image?>" />
</div>
</div>
<?php
}
?>
</div>
<!-- Additional required wrapper -->
<div class="swiper-controls">
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
I never liked this syntax:
while( have_rows('fleet_slides', 'option') ) : the_row();
I just treat them as arrays. (I have a repeater called slides with sub fields: image, html). This code works for me.
foreach (get_field('slides') as $slide) {
$image = $slide['image']['url'];
$html = $slide['html'];
?>
<div class="banner-carousel-item" style="position:relative; background-image:url(<?php echo $image; ?>)">
<div style="background:rgba(0,0,0,0.25); position: absolute; top: 0; bottom: 0; left:0; right: 0; ">
</div>
<div class="slider-content">
<div class="container h-100">
<div class="row align-items-center h-100">
<?php echo $html ?>
</div>
</div>
</div>
</div>
<?php
}
?>
This code needs to be refactored to be "dynamic" in a preview of all blog posts.
The idea of a carousel was too simple, instead I am looking to make the next buttons call the next 3 blog posts.
How would I do that?
I have resources that say I should call "echo"
<div class="blog-content-discussion glow-blue">
<div class="main-title">
All Discussions
</div>
<div class="row" style="margin-top:10px; display:flex;">
<?php
// create a back link if current page greater than 0
$curPage = 0;
if ($curPage == 0) {
?>
<div class="col-md-3">
<div class="img-box">
<img src="img/dog-paw.jpeg" height=25 width=25 />
</div>
<div></i></div>
Also the javascript is not working
$('#users').delegate('#next').delegate('#next', 'click', function() {
$(this).html('Loading...'); // Loader message
$.ajax( {
url: this.href, // URL from next link
success: function(data) {
$('#discuss').after(data).remove();
}
});
return false;});
</div>
<?php
} else {
// otherwise leave the cell empty
//echo ' ';
}
while($row1=mysqli_fetch_array($res1))
{
?>
<div class="col-md-3">
<div class="img-box">
<img src="img/dog-paw.jpeg" height=100 width=100 />
</div>
<div><?php echo $row1['post_owner']; ?></div>
</div>
<?php
}
?>
<div class="col-md-3">
<div class="img-box">
<img src="img/dog-paw.jpeg" height=25 width=25 />
</div>
<div></i></div>
</div>
</div>
</div>
In my view page there is two types of views grid view and list view.in grid view load more function is working properly but when i choose list view load more function is not working there..
this is my view page..
<div class="tab-pane fade in active" id="shop-grid-tab">
<div class="row ">
<div class="shop-product-tab first-sale container2">
<!-- product start -->
<?php foreach($mengalery as $row){?>
<?php $images=json_decode($row->image);{?>
<div class="item">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
<div class="product_list">
<div class="single_product">
<img class="slb" src="<?php echo base_url();?>images/<?php echo $images[0];?>" alt="" />
</div>
</div>
</div>
</div>
<?php }}?>
<!-- col-lg-4 col-md-4 col-sm-4 end -->
</div>
</div>
</div>
<!-- list view product-->
<div class="tab-pane fade " id="shop-list-tab">
<div class="list-view container2">
<!-- single-product start -->
<?php foreach($mengalery as $row){?>
<?php $images=json_decode($row->image);{?>
<div class="row list ">
<div class="item">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
<div class="product_blog_image">
<div class="product_blog_image"> <img src="<?php echo base_url();?>images/<?php echo $images[0];?>" alt="" /> </div>
</div>
</div>
</div>
</div>
<?php }}?>
</div>
</div>
<!-- single-product end -->
this is my controler...
public function men()
{
$data['active_mn']='men';
$data['mendropdown']=$this->Hardpolo_model->get_category_by_parent($p_id=8);
$data['kidsdropdown']=$this->Hardpolo_model->get_category_by_parent($p_id=9);
$data['accessoriesdropdown']=$this->Hardpolo_model->get_category_by_parent($p_id=21);
$config['base_url'] = base_url().'Hardpolo_control/men';
$config['per_page'] = 6;
$config['uri_segment'] = 3;
$config['total_rows'] = $this->Hardpolo_model->count_images($p_id=8);
$config['next_tag_open'] = '<span class="next a">';
$config['next_tag_close'] = '</span>';
$data['mengalery']=$this->Hardpolo_model->get_all_images($p_id=8,$config['per_page'],$this->uri->segment(3));
$this->load->library('pagination',$config);
$data['page_links'] = $this->pagination->create_links();
$this->load->view('men',$data);
}
this is my script..
<script src="<?php echo base_url();?>assets/js/jquery-ias.min.js"></script>
<script>
var ias = $.ias({
container: ".container2",
item: ".item",
pagination: "#pagination",
next: ".next a"
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASTriggerExtension({offset: 2}));
ias.extension(new IASNoneLeftExtension({
text: 'There are no more pages left to load.'
}));
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
i had given classname as container2 for both view and i had given different classname values and all but its not working
OK, this is a bit complicated so Ill try my best to explain it:
I have a while loop which has a next link, before I just had it in standard html, so it was farely simple, on click of the class 'arrow' it would just to the next section e.g:
$i = 0;
while ( have_rows('sections') ) : the_row();
$sectionName = $i++;
?>
<section id="<?php echo $sectionName; ?>" class="full-bg-image" style="background-image: url('<?php the_sub_field('section_image'); ?>')">
<div class="image divider" id="partnersImg" style="background-image: url('<?php the_sub_field('section_image'); ?>')">
<div class="wrapper">
<div class="overlay" style="color: <?php the_field('section_text_colour','options'); ?>">
<?php the_sub_field('divider_text'); ?>
</div>
</div>
</div>
<div class="sectionContent">
<div class="wrapper">
<div class="centerContent">
<div class="contentWrapper">
<div class="text animation-element" data-sr="enter center wait 0.5s, no reset" style="background-color: <?php the_field('text_block_bg_colour','options'); ?>; color: <?php the_field('text_block_text_colour','options'); ?>">
<?php the_sub_field('section_text'); ?>
<div class="arrowContainer"></div>
</div>
<div class="clr"></div>
</div>
</div>
</div>
</div>
</section>
<?php endwhile;
The sectionName variable is set for each item name that is added in the wordpress admin however the issue comes when my above code shows and the anchor is linking too itself and not the next section, I would like to know how to link it to the next section and if its the last section then to have a anchor which links to the first.
<section id="0">
<div class="arrowContainer"></div>
</section>
<section id="1">
<div class="arrowContainer"></div>
</section>
<section id="2">
<div class="arrowContainer"></div>
</section>
<section id="3">
<div class="arrowContainer"></div>
</section>
In this case I am using Advanced Custom Fields repeater and not posts.