Reply New Topic
2008/9/9 2:14:45
#1
Offline
Home away from home

GranadaSur Experiences with an AJAX bite

Hi 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
#2
Offline
Home away from home

Re: GranadaSur Experiences with an AJAX bite

That'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
#3
Offline
Home away from home

Re: GranadaSur Experiences with an AJAX bite

Done.

_________________
If you can't understand what I'm saying, you're not geek enough
ISegura.es

2008/9/10 0:21:17
#4
Offline
Just can not stay away

Re: GranadaSur Experiences with an AJAX bite

Great 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:



png  sort-blockposition.png (0.00 KB)


png  sort-blocktitle.png (0.00 KB)


png  sort-modulename.png (0.00 KB)


png  sort-visibility.png (0.00 KB)


_________________
Core74 - Webdesign | Twitter | Flickr

2008/9/10 0:38:40
#5
Offline
Home away from home

Re: GranadaSur Experiences with an AJAX bite

Conflicts on jQuery and xoops.js?

Read this:

http://xoops-tips.com/news-article.storyid-111.htm

_________________
If you can't understand what I'm saying, you're not geek enough
ISegura.es

2008/9/10 0:39:44
#6
Offline
Just can not stay away

Re: GranadaSur Experiences with an AJAX bite

Damn,.what stupid of me, I just have the feeling I hijacked nachenko's thread. Can an admin move/remove my post please.

_________________
Core74 - Webdesign | Twitter | Flickr

2008/9/10 0:47:03
#7
Offline
Home away from home

Re: GranadaSur Experiences with an AJAX bite

No 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

_________________
If you can't understand what I'm saying, you're not geek enough
ISegura.es

2008/9/10 1:07:51
#8
Offline
Just can not stay away

Re: GranadaSur Experiences with an AJAX bite

Yes, 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.

_________________
Core74 - Webdesign | Twitter | Flickr

2008/12/4 7:58:05
#9
Offline
Home away from home

Re: GranadaSur Experiences with an AJAX bite

I'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.

_________________
If you can't understand what I'm saying, you're not geek enough
ISegura.es

2008/12/4 10:02:25
#10
Offline
Just can not stay away

Re: GranadaSur Experiences with an AJAX bite

Nice 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.

_________________
Core74 - Webdesign | Twitter | Flickr

2008/12/4 10:11:29
#11
Offline
Home away from home

Re: GranadaSur Experiences with an AJAX bite

@incama,

Impressive screenshots of the blocks administration!

_________________
McDonalds Store

Reply New Topic extras
 Previous Topic   Next Topic
You can view topic.
You can start a new topic.
You can reply to posts.
You cannot edit your posts.
You cannot delete your posts.
You cannot add new polls.
You cannot vote in polls.
You cannot attach files to posts.
You can post without approval.