Alright, so I am trying to create a widget for my website that will display all of my recent blog posts. Tumblr already has a JS that will do this that looks like this.
<script src="blogname.tumblr.com/js"></script>
But I have recently found something better that looks like this.
<img border='0' style='margin:0' id='ji-tumblr-photo-blogname-1' src='' alt='' />
<script src='http://blogname.tumblr.com/api/read/json?number=10&type=photo'></script>
<script>document.getElementById('ji-tumblr-photo-blogname-1').setAttribute('src', tumblr_api_read.posts[0]['photo-url-500']);</script>
Not I'm not too great with JS yet but I kind of figured out that the first line and third line share the same "1", and it kind of acts as a place holder. Now in third line you will see where is says:
tumblr_api_read.posts[0]
Again, I'm not that great with JS but I've found out if you change that number it changes what post it displays from your blog. So for instance, I can take that "1" and increment it from 1-10 and increment the "0" from 0-9 and it will display my last 10 Tumblr posts. From my last post I have found out how to increment numbers with this PHP script.
$offset = 10;
$page = 1;
if (isset($_GET['post']) && is_numeric($_GET['post'])) {
$page = $_GET['post'];
}
$start_number = ($page - 1) * $offset;
$end_number = $start_number + 10;
$num = $start_number;
while ($num <= $end_number) {
echo $num;
$num++;
}
echo sprintf('More', $page + 1);
Now I'm not really that sure "how" it works, but I know that it does work. The only problem is that it displays 0-10, and like I said I need it from 1-10 and 0-9. That way in the "while" loop where it echos out $num I can change it to.
<img border='0' style='margin:0' id='ji-tumblr-photo-blogname-<?php echo $onetoten; ?>' src='' alt='' />
<script src='http://blogname.tumblr.com/api/read/json?number=10&type=photo'></script>
<script>document.getElementById('ji-tumblr-photo-blogname-<?php echo $onetoten; ?>').setAttribute('src', tumblr_api_read.posts[<?php echo $zerotonine; ?>]['photo-url-500']);</script>
And when I press the "more" button it will increment the 0-9 to 10-19. I don't believe I have to change the "$onetoten" because it's just a place holder but for right now I'm stuck... Any help would be amazing!
Related
I am trying to add pagination to my CRUD PHP app but it's not working properly.
Trying to limit the data from my SQL database to 5 per page, but it's getting stuck to the first page. If I press the second one, stays on the first page data.
$page = (isset($_GET['page']) ? $_GET['page'] : 1);
$perPage = (isset($_GET['per-page']) && ($_GET['per-page']) <= 50 ? $_GET['per-page'] : 5);
$start = ($page > 1) ? ($page * $perPage) - $perPage : 0;
$sql = "select * from movies limit ".$start." , ".$perPage." ";
$total = $db->query("select * from movies")->num_rows;
$pages = ceil($total / $perPage);
And here I am looping through the pages in the HTML code below the PHP one.
<center>
<ul class="pagination">
<?php for($i = 1; $i <= $pages; $i++): ?>
<li>
<?php echo $i; ?>
</li>
<?php endfor; ?>
</ul>
</center>
I am using bootstrap class for pagination which is added with a script in the head. Any idea why I stay at the first page even when I press the second one?
Here is a photo from my web project, in the url bar u can see i am at the second page, but still showing the data from first. In my database i have 10 elements, so it should be 5 and 5.
Looks like you are using the wrong variable name in your link. It should be:
<a href="?page=<?php echo $i; ?>">
(note, page not pages. Also, remove the spaces which get encoded as %20 in the url)
Be vary careful of putting user-submitted data into your query though, google "SQL injection" to find out more.
I have a project I am working on, where I scan a directory and pull all of the images from the directory that will display the gallery images. Problem is, some galleries have 300+ images and this is causing a lag. I have looked around, but have not found a proper way of getting my code to paginate. Here is my code snippet of where I am running the foreach loop and getting each image source from the directory:
/** get the model's gallery
===================================================== **/
if(isset($_GET['count'])){
$photo_count = $_GET['count'];
}
if(isset($_GET['model_dir'])){
$model_dir = $_GET['model_dir'];
/** get the higres gallery images
===================================================== **/
$root_directory = $_SERVER['DOCUMENT_ROOT'];
$photo_directory = "{$root_directory}/members/content/model_gallery/{$model_dir}";
$gallery_list = scandir($photo_directory);
$gallery_list = array_diff($gallery_list, array('.', '..'));
foreach($gallery_list as $gallery){
echo "
<a href='{$index_url}join.php'>
<img alt='' src='{$site_url}members/content/model_gallery/{$model_dir}/{$gallery}'
data-image='{$site_url}members/content/model_gallery/{$model_dir}/{$gallery}'
data-description=''>
</a>
";
}
}
Any ideas on how I could go about paginating this code would be greatly appreciated.
I solved the problem myself. For those who had something tangible to respond with, thanks for your help. For others who just wanted to critique code, not knowing what the full purpose of the code is and whether or not it is the final piece of code, should probably keep your input to yourself.
/** get the model's gallery
===================================================== **/
if(isset($_GET['count'])){
$photo_count = mysqli_real_escape_string($_GET['count']);
}
if(isset($_GET['model_dir'])){
$model_dir = mysqli_real_escape_string($_GET['model_dir']);
/** get the higres gallery images
===================================================== **/
$root_directory = $_SERVER['DOCUMENT_ROOT'];
$photo_directory = "{$root_directory}/members/content/model_gallery/{$model_dir}";
$gallery_list = scandir($photo_directory);
$gallery_list = array_diff($gallery_list, array('.', '..'));
$photo_count = $photo_count;
$gallery_limit = 35;
$qty_pages = ceil($photo_count / $gallery_limit);
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; }
$start_from = $page * $gallery_limit - $gallery_limit ;
$gallery_list = array_slice($gallery_list,$start_from,$gallery_limit);
echo "<div id='gallery'>";
foreach($gallery_list as $gallery){
echo "
<a href='{$index_url}join.php'>
<img alt='' src='{$site_url}members/content/model_gallery/{$model_dir}/{$gallery}'
data-image='{$site_url}members/content/model_gallery/{$model_dir}/{$gallery}'
data-description=''>
</a>
";
}
echo "</div>";
echo "<div class='contain_pagination'>";
if($photo_count != 0){
echo "<nav class='contain_model_nav'><ul class='pagination'>";
for ($i = 1; $i <= $qty_pages; $i++){
echo "<li><a href='{$index_url}pages.php?id=gallerytour&model_dir={$model_dir}&count={$photo_count}&total={$total_photo_count}&page={$i}'></a>";
echo "</ul></nav>";
}
}
echo "</div>";
}
?>
<script type="text/javascript">
$(document).ready(function(){
$('.pagination').pagination({
items: <?php echo $photo_count;?>,
itemsOnPage: <?php echo $gallery_limit;?>,
cssStyle: 'light-theme',
currentPage: <?php echo $page;?>,
hrefTextPrefix: '<?php echo $index_url ?>pages.php?id=gallerytour&model_dir=<?php echo $model_dir; ?>&count=<?php echo $photo_count; ?>&total=<?php echo $total_photo_count; ?>&page='
});
});
</script>
That is how I was able to paginate the foreach loop. I used nogad's idea for the array_slice function and then I used this open source for the pagination functionality:
http://flaviusmatis.github.io/simplePagination.js/
From there I made sure I had the $photo_count, which contains the count of all images within the directory and essentially what I would be paginating through.
I then set my $gallery_limit per page, which was 35. From there, I determined the number of pages with $qty_pages and dividing by the total $photo_count / and the set $gallery_limit
Next I check if the page isset if it is, then $page is == to the $_GET[page] else it is $page is == 1.
Next I get the $start_from value by multiplying $page * $gallery_limit and then subtracting by $gallery_limit
Next I make the value for the $gallery_list which is an array = to array_slice($gallery_list,$start_from,$gallery_limit);
So my parameters within the function are the entire array of src images for the $gallery_list, the integer of where to start from, and the integer of the $gallery_limit, in this case I set it to a default of 35.
Next I check if $photo_count is != to 0 and then run my normal for loop. the parameters within the url for the anchor will be dependent obviously on your site. One thing to note, is to simply add the &page={$i} parameter to the end of your url.
Finally you use the pagination plugin to write a small jQuery script for the pagination functionality. You should be able to decipher what I did within the jQuery script. I hope this helps someone out, because I have looked at other answers, and none delivered a satisfied result. They were almost as moronic as people like OlegLoginov replying to your question.
Below is my Code.
<?php
$folder_name=$_GET['folder_name'];
$dirname = "customized_kits/images/";
$images = glob($dirname."*");
$filecount = count( $images );
$i=0;
for($i=0;$i<200;$i++) { ?>
<div class="col-md-2"> <div class="photos">
<div id="images1">
<a href=# data-lightbox="roadtrip">
<?php
if($filecount>$i) {
$filename = substr($images[$i], strrpos($images[$i], '/') + 1);
echo '<img src="'.$images[$i].'" style="width:150px;height:150px" /><br/>';
?>
<i class="fa fa-remove"></i>
<?php } else {
echo '<a ><img style="width:150px;height:150px;background-color:#eee" /></a>';
} ?>
</div>
</div>
</div>
<?php } ?>
Here I created 200 boxes with foreach loop I want to show 20 divs for single page and with help of pagination I want to show other divs.I searched in many websites I didnt get exact answer please help me to get out of this issue.
Okay so from your code you can have 200 values of $i and you want to paginate them in segments of 20. Let us start off by adding a script above your code to get the range that needs to be displayed. Page number comes as a GET parameter in number. ex example.com/feeds?number=2.
<?php
$pageno = $_GET['number']; // Page number from frontend
// Now this value will give you 1,2,3 etc
$start = $pageno*20;
// $start contains the initial offset or the value of `$i` from to start
for($i=$start;$i<$start+20;$i++) {
// Will only show 20 elements on the page
}
?>
Remember this is a very basic example. Although i would recommend using range in sql query instead so you don't have to load the complete dataset in each query.
More explanation
Suppose you have M results and you want to show N results on each page, the results on page x would start from x*N to x*(N+1) pure math here. In your code you are iterating $i over the whole loop rather just iterate over that specific range to get results. The value of x is the example is the page number that we get from number in GET verb.
I have something that im currently working on, however it appears that the $_GET doesn't completely work.
I have a JavaScript light box that brings up an image in a little window, this works however i can only guess that it is using the same URL over and over again.
However when i view the source for the page (and even click one of the links in the source) it will display the correct data.
But the lightbox only seems to display the first image.
This is the JavaScript
<script>
//Checkes if any key pressed. If ESC key pressed it calls the lightbox_close() function.
window.document.onkeydown = function (e)
{
if (!e){
e = event;
}
if (e.keyCode == 27){
lightbox_close();
}
}
</script>
<script>
//This script makes light and fade divs visible by setting their display properties to block.
//Also it scrolls the browser to top of the page to make sure, the popup will be on middle of the screen.
function lightbox_open(){
window.scrollTo(0,0);
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
</script>
<script>
//This makes light and fade divs invisible by setting their display properties to none.
function lightbox_close(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>
I wont show the CSS i dont think thats relivant (If someone wants it then ask away)
The relevant part that creates the links is this, its part of a ForEach statement all PHP
$i = 0;
foreach ($nrows as $nrow)
{
$id = $nrow['id'];
$rid = $nrow['RaidID'];
$bid = $nrow['BossID'];
$normal = $nrow['NormalKills'];
$heroic = $nrow['HeroicKills'];
$boss = substr($nrow['BossName'], 0, 3);
$p1 = $id + $bid.".php";
$image = $boss . $p1;
#echo $image;
echo $bid;
if ($oid != $rid)
{
$i = 0;
}
if ($i == 0) {
?><td style="width: 176px;"><center><b><?php echo $nrow['raid']; ?> </b></center></td> </tr><?php
$i++;
}
?><tr><td style="width: 176px;"><div align="left"><?php echo $nrow['BossName']; ?><div id="light"><img src="bossdata/template.php?boss=<?php echo $bid;?>"></a></div><div id="fade" onClick="lightbox_close();"></div>
</div>
<?php
if ($heroic == 0)
{
if ($normal > 0)
{
echo '<img src="images/whiteskull.png" align="right" alt="Normal Kill">';
}
else
{
echo '<img src="images/redx.png" align="right" alt="Not Killed">';
}
}
else
{
echo '<img src="images/redskull.png" align="right" alt="Normal Kill">';
}
?>
</td></tr><?php
$oid = $id;
}
Now this all works, and it actually displays an image with data, however no matter what link i click the boss data is always from the first one on the list.
To me this means that the data is getting through, and reaching the the right parts on image so its "Working", but all the links do the same thing and show the same data :(
*Removed last code Bulk
You have multiple div with the same ID "light" since you create them in a foreach loop.
<div id="light">
Your function lightbox_open() opens all the divs that have id "light".
document.getElementById('light').style.display='block';
That's why you always see the first lightbox. Because the others are behind the first one.
you should try something like this :
function lightbox_open(elem){
window.scrollTo(0,0);
elem.getElementByClass('light').style.display='block';
elem.getElementByClass('fade').style.display='block';
}
And change this :
<a href="#" onclick="lightbox_open();">
By this :
<a href="#" onclick="lightbox_open(this);">
And replace id by class in your div definition :
<div class="light">
$_GET is working correctly in your code.
The issue is in the way you are combining JavaScript and PHP in the second code box. First, all of your divs have the same ID: "light" which is wrong because they all IDs are meant to be unique within the HTML document. You need to identify them uniquely, for example appending the BossID to them.
After identifying each div uniquely you'll have to edit lightbox_open and lightbox_close so they can receive the BossID of the divs that you want to show and hide.
Question is on how to work with php variables in a webpage, using javascript/jquery. The following code represents the scenario.
PHP Code Snippet for pagination -
if($current_page>1)
$previous = $current_page - 1;
else
$previous = $current_page;
if($current_page==$num_pages)
$next = $current_page;
else
$next = $current_page + 1;
//the line below is for right arrow link - go to next page
<?php echo '<a href="gallery.php?p=' .$next. '">
<img src="Arrow-Right.png" width="16" height="16" title="Next Page" /> </a>';
?>
//the line below is for left arrow link - go to previous page
<?php echo '<a href="gallery.php?p=' .$previous. '">
<img src="Arrow-Left.png" width="16" height="16" title="Previous Page" /> </a>';
?>
Now my question -
I want to disable the left and right arrow links based on the condition -
if $current_page = $num_pages (meaning, if max page has reached), then use javascript to disable the right arrow link
if $current_page = 1 (meaning, if min page has reached), then use javascript to disable the left arrow link
Pretty simple scenario for pagination, but my concern is over how to use the variables correctly, since $current_page, $num_pages etc..are all PHP variables, and I assume they cannot be accessed readily in any Javascript code. So how do i access them, so that I can use JS to further work on link enabling/disabling or css styling using js etc...
Appreciate any pointers on the above.
<?php
$next_page = 12;
echo "<script>var next_page=$next_page;</script>"
Javascript variable next_page will be ready for use.
<?php
echo '<script>pagenum=' . $num_pages . ';current_page=' . $current_page . ';</script>';
?>
Just echo your values into javascript:
<script>
var jsvarname = "<?php echo $phpvarname; ?>";
</script>
I assume you know that javascript is client side and php server side, and what that means?
If you don't want the variables showing up in when the page source is viewed, you could store the information in a cookie.
Be aware that it's trivial to look at the contents of a cookie, however.