Blog Carousel horizontal navigation - 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>

Related

Codeigniter Jquery. How to display data into cards using loop for e-commerce

Help i want to display all of this data in cards. the code already can get the result from model to only problem is to display. my plans is when i click the burgers category it will display all the data in card-body and when i press beverages it will display all the beverages without refreshing. for some reason i need to use jquery.. IMAGE LINK: https://imgur.com/a/2DsBKqG
View:
<div class="col-sm-9" style="border:solid 1px;">
<div class="row">
<div class="col-sm-4">
<div class="card">
<div class="card-body">
<div class="product-grid">
<div class="product-image">
<a href="#" class="image" style="background-color:#F3F3F3;">
<img class="pic-1" src="https://media.comicbook.com/2020/05/dragon-ball-super-when-will-
should-goku-master-ultra-instinct-1219439.jpeg?
auto=webp&width=1200&height=628&crop=1200:628,smart" class="d-block w-100">
</a>
<a class="add-to-cart" href=""> + </a>
</div>
<div class="product-content">
<h3 class="title">Product Name</h3>
<div class="price"></div>
</div>
<div class="action-buttons">
<a class="btn-outline">ADD TO CART</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Jquery:
function searchcategory(category_id)
{
$.ajax(
{
url:"<?php echo base_url() ?>admin/getproducts/"+category_id,
type:"POST",
dataType:"json",
success:function(data)
{
data.forEach(key =>
{
let row = `<div class="price" id="price" >${key.price}</div>`;
});
}
});
}

Regarding HTML5canvas div images to download individually

I need help i want to download the htmlf 5 canvas for each individuall and im calling the image data dynamic but not been able to download the canvas plzz help me out from such informartion through my code in future user may add as many template images it will be called with same design as i have called data dynamically so im not getting what to do for download the canvas for such div images can anyone help me out
if ($sImage)
{
$gallery = get_field('field_5ea2b74754193');
?>
<div class="row">
<?php
$counter=1;
$canvas=1;
foreach ($gallery as $value) { ?>
<div class="col-sm-4">
<div class="onethird">
<center>
<h2>Design-<?php echo $counter++;?></h2><br>
<div class="my_banner" id="myCanvas <?php echo $canvas; ?>">
<div class="template_bg" style="background-image: url(<?php echo $sImage?>);">
<!--php echo '<img src="'.$sImage.'" class="absolute img-fluid" />'; ?-->
<img src="<?php echo $value['full_image_url'];?>" class="relative img-fluid" />
</div>
</div>
<div>
<br>
<a id="download" href="#" class="dowload btn btn-danger">Download</a>
</div>
</center>
</div>
</div>
<?php $canvas++; } ?>
<script>
$(document).ready(function() {
var canvas_id=0;
$('a.dowload').click(function(e){
e.preventDefault();
alert('Download on process');
html2canvas($('#myCanvas'),{
onrendered: function (canvas) {
var a = document.createElement('a');
a.href = canvas.toDataURL("image/png");
alert(a.href);
a.download = 'my-image.png';
a.click();
}
});
});
});
</script>
</div>
</div>
<?php
}
I have used a modal box for my issue to get the work to be done in proper work for converting Div images to html2canvas to create one image and download the image side by side
if ($sImage)
{
$gallery = get_field('field_5ea2b74754193');
?>
<div class="row">
<?php
$counter=1;
foreach ($gallery as $key=> $value) {?>
<div class="col-sm-4">
<div class="onethird">
<center>
<h2>Design-<?php echo $counter++;?></h2><br>
<div class="my_banner" id="myCanvas_<?php echo $value['id']; ?>">
<div class="template_bg" style="background-image: url(<?php echo $sImage?>);">
<img src="<?php echo $value['full_image_url'];?>" class="relative img-fluid" />
</div>
</div>
<div>
<br>
<!-- Preview -->
<div class="qrcimg mt-3" data-toggle="modal" data-target="#myModal">
<input id="preview_box" type="button" data-id="<?php echo $value['id'];?>" name="canvas_id" value="Get Image" class="preview_box btn btn-outline-primary"/>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center" style="color:black; font-weight:bold;">SlashDP</h4>
<button type="button" class="close" data-dismiss="modal" style="font-size:2rem;">×</button>
</div>
<div class="modal-body">
<div id="canvas_image" data-id="<?php echo $value['id'];?>"></div>
<center><a id="download" href="#" class="clear btn btn-danger"><i class="fa fa-download" style="font-size:1rem;"> Download</i></a></center>
</div>
</div>
</div>
</div>
</div>
</center>
</div>
</div>
<?php } ?>
<!-- Canvas image get preview and download code -->
<script>
$(document).ready(function() {
// Global variable
var getCanvas;
$(".preview_box").on('click', function() {
var dataId = $(this).attr("data-id");
var canvas_img = $("#myCanvas_"+dataId).get(0);
html2canvas(canvas_img,{
useCORS: true,
allowTaint: false,
letterRendering: true,
logging:true,
onrendered: function(canvas) {
$("#canvas_image").append(canvas);
getCanvas = canvas;
console.log(canvas);
}
});
});
$("#download").on('click', function() {
var imageData =getCanvas.toDataURL("image/png");
// Now browser starts downloading
// it instead of just showing it
var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#download").attr("download", "my-demo.png").attr("href", newData);
});
jQuery(".clear").click(function(){ jQuery("#canvas_image").empty();});
jQuery(".close").click(function(){ jQuery("#canvas_image").empty();});
});
</script>
</div>
</div>**

loadmore function working on grid view but not with list view on the same page

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

Fade in content from specific post?

I am trying to get an effect like on this site so that when I click a div, jquery takes the id of the current clicked div and stores it in a variable.
$(function (){
$('.project-wrapper').click(function() {
var id = $(this).attr('id');
jQuery.ajax({
type: 'post',
url:'wp-content/themes/MartinFjeldUpdated/header.php',
dataType : 'HTML',
data:{"id" : id},
success: function(rs)
{
$(".display-video-image-graphic-fade").fadeIn(500);
}
});
});
});
Then I would like to get that variable to a php variable so that is automatically change the content I want to fade in simply by clicking the thumbnail of a post.
<?php
$paged = $_post['id'];
$args= array(
'id' => $paged,
);
query_posts($args);; if (have_posts()) : while (have_posts()) : the_post(); ?>
<div data-id="<?php echo get_the_ID();?>" class="display-video-image-graphic-fade">
<div class="display-outer-frame">
<div class="display-middle-frame">
<div class="video-frame">
<div id="slider">
<ul class="slides">
<?php the_content(); ?>
</ul>
</div>
</div>
<div class="title">
<h3 class="title-head"> <?php echo the_title(); ?></h3>
</div>
<div class="options">
<div class="inliner back-forth">
<div id="left" class="arrows">
<img src="wp-content/themes/MartinFjeldUpdated/images/left.pdf">
</div>
<div id="right" class="arrows">
<img src="wp-content/themes/MartinFjeldUpdated/images/right.pdf">
</div>
</div>
<div class="inliner out-cross">
<div class="cross">
<img src="wp-content/themes/MartinFjeldUpdated/images/cross.pdf">
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; else : endif; ?>
Somehow it does not work.. I am a real amateur in this, so if you need more explaining, please let me know and I'll try my best.
Thanks.

Masonry Called Correctly But Doesn't Align Grid

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. :)

Categories