I want do something like that - http://imgur.com/kCgH0Jf
I have only function to show 6 posts, but i don't know how do it with content show like a photo.
function six_images_slider() {
$args = array('numberposts' => 18, 'category' => 22);
$recent_posts = wp_get_recent_posts( $args );
$i = 1;
$output = '<div class="slide">';
foreach ($recent_posts as $post) {
$featured_permalink = get_permalink($post['ID']);
$featured_title = get_the_title($post['ID']);
$featured_date = get_the_time('d.m.Y');
$featured_image_src = wp_get_attachment_url( get_post_thumbnail_id($post['ID'] ) );
if ($i == 1) {
$output .= '<div class="col-6 border-l-r">
<big class="white">30</big>
<br /><span class="font-m cream">SIERPIEŃ</span>
</div>';
}
$output .= '';
if ($i == 6) {
$output .= ' </div>';
$i = 0;
}
$i++;
}
$output .= '</div>';
echo $output;
}
I using slick slider to slide next news and more
This is code to whole page:
<section id="wydarzenia" class="page">
<h2>O nas</h2>
<h1>Na Lato Day & Night</h1>
<p>content hover news</p>
<article>
<?php six_image_slider(); ?>
</article>
</section>
Well the link you shared have taken a very different and efficient route. If you look closely, on pressing the next button, the url changes and it takes a sec to load the new page. This means, its not using an image slider and every post has its own comments and description. I dont think its built on wordpress, but if you want to make something like this wordpress, then its much simpler then you expect.
The wordpress way of doing something like this would be as follows.
You need to create a custom post type, and call it something like gallery. Now every post in that gallery will have content area where you can add the images and details about the images, and it will have comments related to that post. Now you can also create categories inside the gallery, and every post will be linked to a gallery. Now when you view a post it will have a next button which will link to the next post from the same category. This way its much more effecient, managable and much much faster :)
Related
I am trying to achieve as shown below in the image.
I want to create a image carousel slider in which I have 4 items having 4 slides each.
This images act like a radio button selection I am getting the list from the database, so I want to highlight which radio button is selected by highlighting the slide which comes as selected.
So whenever the carousel loads it should highlight the slide which is selected as radio input
Simple Carousel
Here is the link of it : https://bootsnipp.com/snippets/featured/simple-carousel
Here is my Code :
<div class="carousel-inner">
<?php
$result = '';
foreach ($template_data as $key => $value) {
if ($key == 0) {
$result .= '<div class="item active">';
}
elseif ($key !=0 && ($key % 4 == 0)) {
//to avoid first empty "active"
$result .= "</div>";
$result .= '<div class="item">';
}
$result .= '<div class="col-md-3"><img src="http://placehold.it/250x250" alt="#" title="#"></div>';
}
$result .= '</div>';
echo $result;
?>
</div>
Your basic premise looks good to me, though an example on jsFiddle or the like highlighting the problem would be much better. For future questions, consider that.
Meanwhile, I might consider reorganizing your code such that there is never ambiguity of when you write the opening and closing element tags. If you open a tag, close it. Always:
<?php
$result = '';
foreach ($template_data as $key => $value) {
$cssClass = 'item';
if ( /* Your test to determine 'active'; you currently have $key == 0 */ ) {
$cssClass .= ' active';
}
$result .= "<div class='$cssClass'><div class='col-md-3'><a href='#'><img src='http://placehold.it/250x250' alt='#' title='#'></a></div></div>";
}
echo $result;
?>
The only if-check necessary should be to determine if the item is active. If so, modify it accordingly. Otherwise, the loop is the same for every item. Much easier to write, read, and reason about later.
I have used a php Function from one YouTube tutorial and it's purpose was to get the data from database and paginate it into several pages according to some variables.
The tutorial link:
PHP Pagination Tutorial
The code is working wonderfully and its working in different pages of the current project i'm working on, but when I tried to use the function in search page it is not working as expected, it's showing all of the data [i.e. 100 Rows] in the same page, then it's displaying the pages numbers and when I click on the second page it shows the same result as the first page [100 Rows] and those 100 Rows are all of the data in my data base.
What I'm trying to achieve is to display 10 Results [10 Rows] in each page, and I then get 10 numbers of pages like [1 - 2 - ...until - 10].
I've been using POST request in search page, but I guess that caused the problem, then I tried to use GET request and it is showing like I just explained.
The Code I have for the pagination function is like
<?php
// Function to Paginate the records from any table.
function paginator($dataSelection, $table, $where1, $where2, $order, $pageTo, $inPage) {
global $con, $stmt, $paginationCtrls, $lastPage;
// Getting the rows number of the table
$stmt = $con->prepare("SELECT * FROM $table $where1");
$stmt->execute();
// Assigning rows number of the specified table
$rowCount = count($stmt->fetchAll());
// Get the page number and make sure its an interger
$p = $_GET['page'];
$page = isset($p) ? preg_replace('#[^0-9]#', '', $p) : 1;
// Per Page records
$perPage = $inPage;
// Last Page Number
$lastPage = ceil($rowCount / $perPage);
/*
Checking if the page number is less than 1 then make it one, and if the page number is greater than the last page number, then make it equal to the last page number.
*/
if($page < 1) {
$page = 1;
} elseif($page > $lastPage) {
$page = $lastPage;
}
// This sets the range of rows to $stmt for the chosen $page.
$limit = 'LIMIT ' . ($page - 1) * $perPage . ',' . $perPage;
// This is your $stmt again, it is for grabbing just one page worth of rows by applying $limit to it.
$stmt = $con->prepare("SELECT $dataSelection FROM $table $where2 ORDER BY $order $limit");
// Establish the $paginationCtrls variable.
$paginationCtrls = '';
// Show the pagination if the rows numbers is worth displaying
if($lastPage != 1) {
/*
First we check if we are on page one. If yes then we don't need a link to
the previous page or the first page so we do nothing. If we aren't then we
generate links to the first page, and to the previous pages.
*/
if ($page > 1) {
$previous = $page - 1;
// Concatenate the link to the variable
$paginationCtrls .= '
<li>
<a href="'.$pageTo.'page='.$previous.'" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>';
// Render clickable number links that should appear on the left of the target (current) page number
for($i = $page - 4; $i < $page; $i++) {
if($i > 0) {
// Concatenate the link to the variable
$paginationCtrls .= '
<li>
<a href="'.$pageTo.'page='.$i.'">
'.$i.'
</a>
</li>';
}
}
}
// Render the target (current) page number, but without it being a clickable link
// Concatenate the link to the variable
$paginationCtrls .= '
<li class="active">
<a>
'.$page.'
</a>
</li>';
// Render clickable number links that should appear on the right of the target (current) page number
for($i = $page + 1; $i <= $lastPage; $i++) {
// Concatenate the link to the variable
$paginationCtrls .= '
<li>
<a href="'.$pageTo.'page='.$i.'">
'.$i.'
</a>
</li>';
// if the loop runs for tims then break (stop) it.
if($i >= $page + 4) {
break;
}
}
// This does the same as above, only checking if we are on the last page, if not then generating the "Next"
if ($page != $lastPage) {
$next = $page + 1;
// Concatenate the link to the variable
$paginationCtrls .= '
<li>
<a href="'.$pageTo.'page='.$next.'" aria-label="Next">
<span aria-hidden="true">
»
</span>
</a>
</li>';
}
}
}
and the code I have in search page is as following, and I run the function like so:
<?php
// GET variable
$sQuery = $_GET['searchFor'];
// Force the user to be in the first page if the get page is not set or is empty
if(!isset($_GET['page'])) {
header('location: search?searchFor='.$sQuery.'&page=1');
}
// Require The Paginator Function
require_once $functionsDir . 'public/saj_paginator.php';
// Initialize The Paginator Function
// array('%'.$sQuery.'%')
paginator(
'*',
'saj_articles',
'WHERE art_status = 2',
'WHERE art_title LIKE ? AND art_status = 2',
'art_id DESC',
'search?searchFor='.$sQuery.'&',
10
); //'search?searchFor='.$sQuery.'&',
// LIMIT is not working
// Force the user to not pass the last page
if($_GET['page'] > $lastPage) {
header('location: search?searchFor='.$sQuery.'&page='.$lastPage);
} elseif($_GET['page'] < 1) {
header('location: search?searchFor='.$sQuery.'&page=1');
}
// Connect and retrieve data from database
$stmt = $con->prepare('SELECT * FROM saj_articles WHERE art_title LIKE ? AND art_status = 2');
$stmt->execute(array('%'.$sQuery.'%'));
$count = $stmt->rowCount();
$rows = $stmt->fetchAll();
// if Nothing was found
if(empty($rows)) {
alert('<h3>No Results Found!, Try Something else</h3>', 'info', '', false);
require_once $layoutsDir . 'search/search-form.php';
} else { echo '
<span class="results-count">
'.$count.' Articles Was Found
</span>
';
foreach ($rows as $row): ?>
<div class="panel panel-default">
<div class="panel-heading">
<a href="articles?id=<?php echo $row['art_id'] ?>">
<?php chkTxtDir($row['art_title']) ?>
</a>
</div>
<div class="panel-body">
<span class="label label-primary">Abstract</span>
<br><br>
<p>
<?php
require_once $functionsDir . 'articles/excerpt.php';
excerpt(
$row['art_abstract'],
'articles?id=' . $row['art_id'],
'Continue Reading',
'300');
?>
</p>
</div>
</div>
<?php endforeach;
echo
'<nav aria-label="Page navigation" class="text-center">
<ul class="pagination">
'.$paginationCtrls.'
</ul>
</nav>';
}
And this is the form that I have in the search page
<form action="search" method="GET" class="mb">
<!-- Search Input -->
<div class="form-group">
<input type="search" class="form-control custIn" name="searchFor"
placeholder="Search for Articles..." dir="auto"
<?php
echo isset($_GET['searchFor']) && !empty($_GET['searchFor']) ?
'value="' . htmlentities($_GET['searchFor']) . '"' : ''
?>
required>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block" type="submit">
Search
</button>
</div>
</form>
Is there any way I can solve this problem?
I have already implemented the pagination in some other pages of the website i'm working in, but only this search page is not working fine.
I admit it, I struggled a lot to understand the concept of the pagination, although I don't understand it completely, but I have very good Idea after working on this website..
If my explanation of this problem isn't that obvious, please let me know which part I have to give you more information about, and If this problem can't just get fixed by PHP, please teach me the best way to do it by JavaScript or jQuery, it is really important to do it..
Thank you.
i have multiple folders and all folders contain some images upto 20 images.
in my html page i want to show first 5 images and show click to view more 15
and when the user click that link it will show next 15 images
but till now i can only fetch all the images at a time
here is my code
<?php
$dirname = "img/outlets/".$service_type."/". $outlet_name ."/snaps/";
$images = glob($dirname."*.jpg");
foreach($images as $image)
{
?>
<a href="<?php echo $image ?>" class="imageHover">
<img src="<?php echo $image ?>" class="img-responsive" />
</a>
<?php
}
?>
I am sorry for not being supportive or all but I think you should ask or research about "pagination". What you are asking is a definition of pagination.
Actually you are asking , "How do I implement pagination ?"
http://codular.com/implementing-pagination
http://code.tutsplus.com/tutorials/how-to-paginate-data-with-php--net-2928
and here is some code you can try to implement simple pagination
try {
// Find out how many items are in the table
$total = $dbh->query('
SELECT
COUNT(*)
FROM
table
')->fetchColumn();
// How many items to list per page
$limit = 20;
// How many pages will there be
$pages = ceil($total / $limit);
// What page are we currently on?
$page = min($pages, filter_input(INPUT_GET, 'page', FILTER_VALIDATE_INT, array(
'options' => array(
'default' => 1,
'min_range' => 1,
),
)));
// Calculate the offset for the query
$offset = ($page - 1) * $limit;
// Some information to display to the user
$start = $offset + 1;
$end = min(($offset + $limit), $total);
// The "back" link
$prevlink = ($page > 1) ? '« ‹' : '<span class="disabled">«</span> <span class="disabled">‹</span>';
// The "forward" link
$nextlink = ($page < $pages) ? '› »' : '<span class="disabled">›</span> <span class="disabled">»</span>';
// Display the paging information
echo '<div id="paging"><p>', $prevlink, ' Page ', $page, ' of ', $pages, ' pages, displaying ', $start, '-', $end, ' of ', $total, ' results ', $nextlink, ' </p></div>';
// Prepare the paged query
$stmt = $dbh->prepare('
SELECT
*
FROM
table
ORDER BY
name
LIMIT
:limit
OFFSET
:offset
');
// Bind the query params
$stmt->bindParam(':limit', $limit, PDO::PARAM_INT);
$stmt->bindParam(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();
// Do we have any results?
if ($stmt->rowCount() > 0) {
// Define how we want to fetch the results
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$iterator = new IteratorIterator($stmt);
// Display the results
foreach ($iterator as $row) {
echo '<p>', $row['name'], '</p>';
}
} else {
echo '<p>No results could be displayed.</p>';
}
} catch (Exception $e) {
echo '<p>', $e->getMessage(), '</p>';
}
Simple PHP Pagination script
If I understood you correctly, you want your first page to display 5 images. Then, after clicking on a link, you want the same page to show the remaining images (from 5 up until the number of images in the folder – maybe 20 in your case).
I've been a bit verbose just so that it's clear. I've also left you echoing file paths as your code specifies, but presumably you're going to want to turn these into URLs. I'll leave that to you.
Try something like this:
<?php
$dirname = "img/outlets/".$service_type."/". $outlet_name ."/snaps/";
$images = glob($dirname."*.jpg");
$initial_images = 5; // However many you want to display on the inital load
// Get the starting image and the end image array keys
if($_GET['show_all_images']){ // Check the the browser sent a query parameter
// We've been asked to display more
// Get the array index of the first image. Remember that arrays start at 0, so subtract 1
$first_image_index = $initial_images - 1;
// Get the array index of the last image
$last_image_index = count($images);
}
else{
// We're on the inital load
$first_image_index = 0;
$last_image_index = $initial_images - 1;
}
// Iterate the glob using for. We want to specify an array key, so it's easier here to use for rather than foreach (which is the right solution most of the time)
for ($i=$first_image_index; $i < $last_image_index; $i++):?>
<a href="<?php echo $images[$i] ?>" class="imageHover">
<img src="<?php echo $images[$i] ?>" class="img-responsive" />
</a>
<?php endfor;?>
<?php if($_GET['show_all_images']): // Display a 'show less' link?>
Show less
<?php else: ?>
Show more
<?php endif; ?>
A simple way is to name images to end with indexed. Example being img_1.
You can then use ajax to fetch the last 15 images when user clicks on view more.
But this approach is very basic and is not scalable. As other answers suggest you can mix pagination with indexed image name approach
I've read multiple examples on infinite scrolling, but I find it hard to implement it to my code. Here's the code, where data get shown from MySQL database :
<div class="container" align="center" style="margin-top:100px;margin-bottom:100px"><div class="row">
<?php
$result = mysql_query("SELECT * FROM batai WHERE svarbumas=1 ORDER BY id DESC");
while ($row = mysql_fetch_array($result))
{
extract($row);
$link=$row["linkas"];
echo "<div class='col-md-4'>";
$sites_html = file_get_contents($link);
$html = new DOMDocument();
#$html->loadHTML($sites_html);
$meta_og_img = null;
//Get all meta tags and loop through them.
foreach($html->getElementsByTagName('meta') as $meta) {
//If the property attribute of the meta tag is og:image
if($meta->getAttribute('property')=='og:image'){
//Assign the value from content attribute to $meta_og_img
$meta_og_img = $meta->getAttribute('content');
}
}
list($width, $height) = getimagesize($meta_og_img);
$skaicius = abs($width - $height);
if($width > $height) {
echo "<img src=\"$meta_og_img\" style='height:234px;margin-left:-33%' onclick='window.open(\"$link\", \"_blank\");'>";
}
else if($width < $height) {
if($skaicius < 100){
echo "<img src=\"$meta_og_img\" style='width:234px'
onclick='window.open(\"$link\", \"_blank\");'>";
}
else {
echo "<img src=\"$meta_og_img\" style='width:234px;margin-top:-33%'
onclick='window.open(\"$link\", \"_blank\");'>";
}
}
echo "</div>";
}
?>
Stored in the database is a link to, for example, a internet shop page. What the code does is it takes a image for facebook preview from the link stored in the db, which is tagged og:image and then positions it to center. The problem is that page tries to load every image and that takes a ton of time to load the page, thats why I want to somehow make it into a load on scroll page. Btw, Im using Bootstrap's grid system here. I hope you can help me. P.S. If you don't get what I mean because of my bad english, ask me and I'll try to answer it more clearly
I need to put content in a jquery slider and for the slider each slide is a <li> element and I have to put a list of products within that slide, but it also must automatically create a new slide when it's full.
Now I've decided that I'm going to put 4 elements in a boundry of 1 slide so after 4 elements, the php loop must create a new slide. How can I do that? It looks somewhat like this:
while($r=mysql_fetch_array($sql)) {
echo "
<li>
$r['title']
<li>";
}
but of course, this code creates a new slide everytime it returns the result, which isn't what I want.
you can try this one
<?php
$count=4;
while($r=mysql_fetch_array($sql)) {
if($count % 4==0)
{
echo "<li>";
}
echo $r['title'];
if($count % 4 ==3)
{
echo "</li>";
}
$count++;
}
?>
Maybe something like this?
$i = 1;
while($r=mysql_fetch_array($sql)) {
if($i%4==0) echo "<li>";
echo $r['title'];
if($i%4==3) echo "</li>";
$i++;
};