I have created a gallery for my website and I decided to use jQuery infinite scroll plugin (ex: facebook wall) on my gallery.
All datas are coming from PHP MyAdmin database. My question is, how to get datas to infinite scroll from database? My all codes are working without any issue.
Database: gallery
Table structure for table: posts
index.php:
<?php
include ("connect_database.php");
$select_post = "SELECT * FROM posts ORDER BY rand() LIMIT 5";
$run_posts = mysql_query($select_post);
while ($row=mysql_fetch_array($run_posts)) {
$post_id = $row['post_id'];
$post_date = $row['post_date']; //.etc here
?>
<div id="container">
<!-- gallery codes here and five thumbnails are randomly loading on homepage -->
</div>
<!--Next page for INFINITE SCROLL-->
<nav id="page-nav">
<!--please check script.js-->
</nav>
Next page is loading without any issue when I add a html or php file in <nav> tags.But I need to create a new php/html file for each loads.Can I have an idea to load next 5 thumbnails without creating a new file.I need to get next five thumbnails to infinite scroll from database.
script.js:
var $container = $('#container');
$container.infinitescroll({
// infinite scroll options...
navSelector : "#page-nav",
// selector for the paged navigation (it will be hidden)
nextSelector : "#page-nav a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#container .box",
// selector for all items you'll retrieve
extraScrollPx: 10,
}
);
If you want to have 5 random posts load with every scroll, the you do not need to differentiate one request from the other (ex. page number).
Although I don't see this as a viable solution because you will end up with duplicate entries (you decide if this is a problem or not), you can use the 'path' option to call the next page like the example below.
$container.infinitescroll({
// infinite scroll options...
navSelector : "#page-nav",
// selector for the paged navigation (it will be hidden)
nextSelector : "#page-nav a:first",
// selector for the NEXT link (to page 2)
itemSelector : "#container .box",
// selector for all items you'll retrieve
extraScrollPx: 10,
path: function(index){
return "index.php?page=" + index;
}
}
);
Then of course you will have to tweak your index.php file to handle the page parameter correctly. Yet, again, having the random results, you will not need a 'page' parameter but rather always return "index.php" inside the path function and things should work fine.
Related
The accordion that is functioning is built-in shortcode within a WP theme. I have regular old anchors on an external page that link to this main page with several terms/definitions inside the accordion. I'd like the anchor tag to not only take the user to the listed term, but also open the accordion panel it's inside of, thus showing the definition.
I tried this unsuccessfully - http://jsfiddle.net/VZ3T5/5/
And now I've moved on to this but can't seem to get it to work either -
<script type="text/javascript">
var anchor = window.location.hash.substring(1);
$('.' + anchor).removeClass('active');
</script>
One way you could activate a particular accordion tab is by using it's ID.
So, you could use, for instance:
$("#accordion").accordion();
$("#accordion").accordion("option", "active", 2);
to activate the third tab after the accordion is "activated" (accordion tab elements are numbered from 0). There could be a lot of ways to do what (I think) you want to do:
Use an ID with the url of the page with the accordian, for instance:
www.domain.com/myaccordionpage.html#2
This way, after you activate your accordion in your JS, you can open the 3rd tab on your accordion element when this page loads:
$("#accordion").accordion("option", "active", parseInt(window.location.hash.substring(1)));
This could be one solution.
Ref: https://jqueryui.com/accordion/
Using wordpress and isotope, I've created an archive page that displays individual posts as isotope style tiles.
It looks a bit like this:
http://i.imgur.com/t1jtWce.png
The code that generates it consists of isotope's grid system:
$(document).ready(function () {
var $container = $('.showcase');
$container.isotope({
itemSelector : '.item',
masonry : {gutterWidth: 0, columnWidth: 1}
});
});
And wordpress/php calls to generate the content:
<div class="showcase">
<? $project = new WP_Query( array( 'post_type' => 'project', 'posts_per_page' => 10, 'order' => 'DEC' ) ); while ( $project->have_posts() ) : $project->the_post();?>
<div class="item">
~the bits and pieces that make up each post tile~
</div>
<? endwhile; wp_reset_postdata(); ?>
</div>
I've shortened/debranded that a bit, but I can offer more info if need be.
posts_per_page is currently set to 10, which is fine... My goal is to have a load more button that can create additional tiles.
Here's a quick and dirty demo animation: http://i.imgur.com/D0JCSKN.gif
I would like to find a way to do this without requiring a page refresh. Bonus points if it can animate with isotope's built in css transforms.
I believe isotope and it's infinite scroll plugin can handle something like this, but I'm not sure how to tie it into the php loop in Wordpress.
If anyone can offer advice, I'd very much appreciate it. Thanks :)
I'm not sure about the Wordpress plugins, but the general approach is to have a PHP page that would get a list of items for you. You need to pass offset and limit there. For example, when you first loading the page you just get
SELECT * FROM items LIMIT 10
Then, you show a button "Show more" which would pass to php action via ajax new offset/limit. As soon as you know that you already shown 10 items you just pass the parameters
http://example.com/items/getlist?offset=10&limit=10
You can do this call via XHR (http://api.jquery.com/jQuery.ajax/), in which offset is count of already shown items. Then your php script fetches result with sql
SELECT * FROM items LIMIT 10, OFFSET 10
Then you just use javascript to append recieved by AJAX call data to your div container with items.
I'm just starting out using the ProcessWire system and really enjoying it.
On my Home Page, I would like to display an image from a random page. The page can be ANY page as long as the it is the child of the parent page with ID '1010'.
Is it possible, and if so, how do I achieve this?
My current code for showing the home page image is this:
if($page->image) echo "<img src='{$page->image->url}'>"; however, I'd like to select a random image from any of the children pages of the above parent ID.
I found this, but wasn't sure whether it would be of any use.
Many thanks for any pointers :-)
You should try something like this in your template's code (assuming that your image field is called image):
/* Find all children of page with ID 1010 that include an image */
$allChildPages = $pages->find('parent=1010,image.count>0');
/* Select a page from all children in the PageArray randomly */
$randomChildPage = $allChildPages->getRandom();
if ($randomChildPage->image) {
echo "<img src='{$randomChildPage->image->url}'>";
}
Have a look at the relevant code:
$pages->find() returns a collection of Pages (matching the Selector) as a PageArray (that extends the WireArray class).
$anyWireArray->getRandom() returns a random element of itself.
Also have a look at this forum thread where several strategies to randomize images from different pages are discussed.
I'm trying to implement different layouts in Joomla. I'm using the Alias Name for setting
different layouts for each page. I read an E-book about Joomla and there's no another method to create different layouts and or set it in the Backend Panel.
I wanted to ask, is there be another method / way to set a different page from Backend Panel for each page ? I just want to make sure it's possible in Joomla 1.5.
My Previous Method
// Get Alias Page
function getCurrentAlias(){
$menu= &JSite::getMenu();
$active= $menu->getActive();
return $active->alias;
}
After getting the Alias page name, I used a conditional statement to get different content
for each page.
<-- Header Part -->
<-- Start Content Part -->
if( $pageName == "home" ){
{{Content Home}}
}elseif( preg_match("#^(news).*$#", $pageName) ){
{{Content News}}
}...etc
<-- End Content Part -->
<-- Footer Part -->
First, I wold recommend not using 1.5, it reaches end of life next month.
however, if you are going to use 1.5, you are making it a lot harder than you need to. If you want to have significant structural differences from one page to another, you can install a template for each different structure you would like to use, then assign each template to the appropriate menu item. You would have to create menu items, even if they are in a hidden menu that is not displayed on the site.
You can also control the structure of the page using CSS and collapsible module positions. Add this so you can set a page class suffix that adds an ID to the body tag of the page, making it easy to have page specific CSS:
<?php
$menu = &JSite::getMenu();
$active = $menu->getActive();
if (is_object( $active )) :
$params = new JParameter( $active->params );
$pageclass = $params->get( 'pageclass_sfx' );
endif;
?>
<body id="<?php echo $pageclass ? $pageclass : 'default'; ?>">
Then for each of the module positions on the page, you can make them collapsible so they do not show up on the page if they are not being used:
<?php if ($this->countModules('top')) : ?><div id="top"><jdoc:include type="modules" name="top" style="xhtml" /></div><?php endif; ?>
So basically, if you don't put any modules in the "top" position it never gets put on the page. Using these 2 items in combination you can control exactly how each page looks with a single template.
When we where using Joomla! 1.5 we used an extension called "Menu Dependent Items" to load particular CSS, JS etc
Through loading the right CSS etc we where able to completely relayout any given page.
Of course with the advent of template "Styles" in Joomla! 2.5+ we no longer need it as we can assign just the style variation to the menu item.
Whats the easiest way to enable my page title to update per content div areas it's on?
I have a vertical scrolling website and would like the page title to change when the user navs to each content area (The content areas are within div & article)
Essentially, I'm trying to keep 'Orginal Site Title | + Home/About etc'
I'm thinking it's something I'd have to call with php to remember a set title attribute per div link? Any suggestions on setting this up (If possible)
I think you should take a look at the Viewport plugin. This way you have 4 selectors you can use:
$(":in-viewport")
$(":below-the-fold")
$(":above-the-top")
$(":left-of-screen")
$(":right-of-screen")
Now you could do something like this:
//Get the id of element(div) that is currently in view
var inview = $('div:in-viewport:first').attr('id');
//Define titles
if (inview == 'home'){
var newtitle = 'Home'
} else if (inview == 'about') {
var newtitle = 'About us'
}
//Lets rename the page title
document.title = 'Orginal Site Title |' + newtitle;
The above code should now always be called when you scroll ($(window).scroll(function () { ... });) to update page title according to the div that is currently in view.
This is just a generic example and it can be completely changed to your needs. I hope it helps in some way.
You might be able to do this by writing a plugin based on the scrollspy plugin that comes as part of twitter bootstrap: http://twitter.github.com/bootstrap/javascript.html#scrollspy
You could tweak it so rather than setting a class on the target it updates the title with whatever the content is in the current viewable panel