2008/9/9 2:14:45
|
---|
|
GranadaSur Experiences with an AJAX biteHi everyone.
Now it's time to show the world my latest creation: Granada Sur Experiences http://www.granadasur.com Look at the AJAX snippet that changes the photo every eight seconds. Ain't it cool, baby? It's done using jQuery. And this is only the beginning, AJAX is piece of cake using jQUery. Now I should have a try at jQuery UI to make things cooler |
2008/9/9 2:54:28
|
---|
|
Re: GranadaSur Experiences with an AJAX biteThat's a really good piece of work!
Don't forget to submit a news piece about your new site |
2008/9/9 4:25:20
|
---|
|
Re: GranadaSur Experiences with an AJAX biteDone.
|
2008/9/10 0:21:17
|
---|
|
Re: GranadaSur Experiences with an AJAX biteGreat work nachenko. I also love jquery and am experimenting with it on the admin side of impress.
First thing I did was try to improve the visibility of the blocks mode (on/off) by adding the variable class into the tr element that defines wether a block is active or not. Second, I call upon jquery and a small table sort scripts to do the trick. The th (tableheaders) now have two functions, describe the colom, and use as sorting order. The only problem I now have is that jquery kinda has troubles with the xoops.js file as it conflicts^^ Attach file: sort-blockposition.png (0.00 KB) sort-blocktitle.png (0.00 KB) sort-modulename.png (0.00 KB) sort-visibility.png (0.00 KB) |
2008/9/10 0:38:40
|
---|
|
Re: GranadaSur Experiences with an AJAX bite |
2008/9/10 0:39:44
|
---|
|
Re: GranadaSur Experiences with an AJAX biteDamn,.what stupid of me, I just have the feeling I hijacked nachenko's thread. Can an admin move/remove my post please.
|
2008/9/10 0:47:03
|
---|
|
Re: GranadaSur Experiences with an AJAX biteNo problem, incama. We're just talking, and using jQuery in admin side is a subject I'm interested in.
Please tell me if the link I pasted just before explains why you are having conflics with xoops.js |
2008/9/10 1:07:51
|
---|
|
Re: GranadaSur Experiences with an AJAX biteYes, the link explains alot indeed;). But since I'm dealing with the admin side I have to find the right files, which is kinda hard since they are spread system wide. I even had to cheat a little when I call the jquery script, using one of the preload files, which is,.,.uhh,.not appropriate.
|
2008/12/4 7:58:05
|
---|
|
Re: GranadaSur Experiences with an AJAX biteI've written an explanation on the trick used for this site.
I can't post in the blog due to the last week's incident, so until I get back permission, here you have: Random pics changing over time: EXTGallery block and jQuery's AJAX for ImpressCMS OK, so you have a photo gallery. And you have a block showing some photos, but you'd like them to change every few seconds. Something like this? Look right column for a few seconds. http://www.granadasur.com/modules/contents/ OK, you got the point, keep reading. 1 - A random block. First thing we did is to put a random block where we wanted to using block administration interface (admin ->blocks). At this moment it was just static content, every time the page loads, there are three random pics there. That simple. The number of pics can be configured in the block. Once they are on screen, they don't change. If we could execute this block's code again, it would give us a new bunch of random pics, am I right? 2 - A piece of middleware If we want to change a page once it's loaded, we need to use Javascript. There's no other choice. So, to change this picture we need to give Javascript a list of new pictures in a format Javascript can understand. A format Javascript can understand is JSON, and the piece of code that we are usign to give Javascript the info is this: <?php
// AJAXed extGallery random pic block.
// Nachenko - www.pensamientosdivergentes.net
require_once ('../../mainfile.php');
require_once (XOOPS_ROOT_PATH.'/header.php');
require_once (XOOPS_ROOT_PATH.'/modules/extgallery/blocks/extgallery_blocks.php');
// Get block's options
// Thanks Trabis for this code
$blockid = 31; // This is block's ID. You can get a block's ID in group's menu.
include_once(XOOPS_ROOT_PATH."/class/xoopsblock.php");
$block = new xoopsBlock($blockid);
$options = $block->getVar("options");
$ret = array ();
$pics = extgalleryRandomShow($options);
foreach ($pics['photos'] as $p) {
$ret[] = array (
'title' => $p['photo_title'],
'desc' => $p['photo_desc'],
'file' => $p['photo_name'],
'id' => $p['photo_id']
);
}
echo(array2json($ret)); // this gives the stuff to Javascript
// Array to JSON function
// Thanks Bin-Co http://www.bin-co.com/php/scripts/array2json/
function array2json($arr) {
if(function_exists('json_encode')) return json_encode($arr); //PHP 5.2.0 already has this function
$parts = array();
$is_list = false;
//Find out if the given array is a numerical array
$keys = array_keys($arr);
$max_length = count($arr)-1;
if(($keys[0] == 0) and ($keys[$max_length] == $max_length)) {//See if the first key is 0 and last key is length - 1
$is_list = true;
for($i=0; $i<count($keys); $i++) { //See if each key correspondes to its position
if($i != $keys[$i]) { //A key fails at position check.
$is_list = false; //It is an associative array.
break;
}
}
}
foreach($arr as $key=>$value) {
if(is_array($value)) { //Custom handling for arrays
if($is_list) $parts[] = array2json($value); /* :RECURSION: */
else $parts[] = '"' . $key . '":' . array2json($value); /* :RECURSION: */
} else {
$str = '';
if(!$is_list) $str = '"' . $key . '":';
//Custom handling for multiple data types
if(is_numeric($value)) $str .= $value; //Numbers
elseif($value === false) $str .= 'false'; //The booleans
elseif($value === true) $str .= 'true';
else $str .= '"' . addslashes($value) . '"'; //All other things
// :TODO: Is there any more datatype we should be in the lookout for? (Object?)
$parts[] = $str;
}
}
$json = implode(',',$parts);
if($is_list) return '[' . $json . ']';//Return numerical JSON
return '{' . $json . '}';//Return associative JSON
}
?> We saved this code in theme folder and named it "random_pic.php". This code executes the random pic block, gets the output and converts it to JSON. If you're running PHP 5.2 or later, you can replace array2json() function by a native one, json_encode() and cut this code in half. 3 - a jQuery AJAX incident We want AJAX but we don't like pain, so we'll use jQuery for the next task. We'll write a jQuery function that makes the "AJAX phone call" and put the results in the page. This is it: <script language="javascript" type="text/javascript" src="<{xoAppUrl libraries/jquery/jquery.js}>"></script>
<script language="javascript" type="text/javascript">
// Config variables
q = jQuery;
time = 8000; // Pics will change every 8 seconds
timefade = 400; // Transition effect will last for 0.4 seconds
middleWare = "<{xoImgUrl random_pic.php}>";
siteUrl = '<{$xoops_url}>';
q(document).ready( function () {
// AJAX random pic
timeout = setTimeout('randomPics()', time);
} );
// AJAX function that gets the random pics
function randomPics () {
i= 0;
thefile = new Array();
q.ajax({
url: middleWare,
dataType: 'json',
success: function(data){
q(data).each( function () {
thefile.push(siteUrl+ '/uploads/extgallery/public-photo/thumb/thumb_' +this.file);
q("div#right-column .extgallery img:eq("+i+")").animate({opacity: 1}, timefade*i).animate({opacity: 0}, 'slow', function () {
q(this).attr("src", thefile.pop());
} ).animate({opacity: 1}, 'slow');
i++;
} );
}
});
timeout = setTimeout('randomPics()', time);
}
</script> And this is it. This is how GranadaSur Experiences has a nice AJAXed random pic changin block. |
2008/12/4 10:02:25
|
---|
|
Re: GranadaSur Experiences with an AJAX biteNice tutorial Nachenko.
I've use an other solution on a template I'm developing right now. http://www.core74.org/project/templates/C74-template-blocked/htmlonly/ Downside is it preloads all the images before changing the images, but a big plus is that the Innerfade plugin also can handle text, or images with text. |
2008/12/4 10:11:29
|
---|
|
Re: GranadaSur Experiences with an AJAX bite@incama,
Impressive screenshots of the blocks administration! |
_________________
McDonalds Store |