Ajax: Dynamically reloading image content in theme (working prototype)
|
dave8401
Joined: 2009-06-01
Posts: 129 |
Posted: Thu, 2010-08-12 06:31
|
|
I'm working on an addition to Serge's greydragon theme (though this should work in other themes as well). My idea is to load images per ajax dynamically instead of refreshing the whole page (which causes some disruption). Wouldn't such a ajax-functionality (reloading pictures, etc.) be exciting???!!!! If interested you can have a look on my current test-site: I spoke to Serge about this, I fixed some obvious bugs based on his feedback but he requested me to also (re-) load item-/meta-data dynamically ('on Image change'). Now my question is 'How should I do this?':
As soon as I know how the server-side is done (e.g. rest), I think I will be able to complete this (I'm familiar with the basics of ajax/json with jquery, so I won't bother you here ;)). Thanks in advance for some guidance! BR, |
|
Posts: 127
Hi David,
Looks really cool. Do we get to have a look at the code or do you prefer to have it ready before pubishing it?
Thank you,
Uli
---
Build bridges not barriers.
Posts: 129
Hi Uli,
Thanks for the positive response.
Not a big fan of attaching code to posts, but for the sake of simplicity I'm attaching here my current branch (you need to use the modified theme together with the modified thumbnav module!).
Pls. see it as a prototype, whoever is better in jquery/ajax should improve it.
My biggest headache is how to reload meta-/image-data. Any suggestions / help highly appreciated.
BR,
David
Posts: 225
David,
This looks great! Have you tested this with other themes? If I wanted to try it out, where would I put the downloaded code? Is the thumbnav a module?
Finally, it would seem to me that the best way to reload the meta info is to indeed call the REST API (I imagine the ajax call can do a normal http post, though haven't done it myself) and then use javascript to change the description using the g-metadata class as the selector. You can probably somehow call the right html template as well, though I have no idea how.
I look forward to trying this out, thanks!
Tomek
----
Publish on Gallery 3 (WLPG Plugin) | XMP Module
Posts: 129
@tkott: let's stick to this theme for the time being. let's find the best way how to do such things and then we can think about modification of other themes / new ajax themes. You can simply unzip greydragon.zip to your 'themes'-folder and thumbnav.zip to your 'modules'-folder. Then install the module and activate the theme in the admin section.
Can u tell me which extension I have to install so that I could try the REST API with my local XAMPP server
(btw. working with mac os x)?
Posts: 127
Hi,
Thanks for the code I will give it a try once I'm home. I'm not a pro in jQuery either but I will definately have a look at the code and give you some feedback (if I can)
---
Build bridges not barriers.
Posts: 225
David,
If you mean enabling REST, then it's the REST module that comes with Gallery 3. You can find more info in the REST API: http://codex.gallery2.org/Gallery3:API:REST.
If you mean how do you use jQuery / PHP / etc to post things, here is a link to jQuery: http://api.jquery.com/jQuery.post/.
Sorry if I misunderstood your question!
Tomek
----
Publish on Gallery 3 (WLPG Plugin) | XMP Module
Posts: 129
No, I meant the XAMPP-server:
The sample code that's provided has an "include Http/Request.php" at the beginning.
My local server errors here out!
Can somebody advise me on which package I have to install to make it work?
Posts: 44
If you're making the requests with ajax (which is what i think you want to do) then you can make the requests client side using jQuery and not worry about the PHP.
Posts: 225
Oh, sorry!
That's probably a PEAR package. Here's the general info: http://pear.php.net/, and the more specific for the file: http://pear.php.net/package/HTTP_Request/. I think if you're using PHP 5.3, PEAR is automatically insalled, so you can run something like
pear install http/requestfrom the command line.Tomek
----
Publish on Gallery 3 (WLPG Plugin) | XMP Module
Posts: 16504
That's really awesome!
Is there a possibility this could be a module instead of being baked into a particular theme? Maybe at least the steps you've gone through laid out so someone else could bake it into their theme?
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here
Posts: 2466
@dave8401: OK, since GreyDragon theme is a base here, at least for now, I am going to hijack the code to play with it inside my theme.
As I mentioned before I was looking for something like that to be added to the theme out of the box, but if it would become generic module, it could be great as well.
Few comments:
I began to go through your changes for thumb nav module. are you using name attribute as an id? in XHTML standard name attribute has been marked as depricated and for page to comply with the standard it would be nice if it could be replaced by sudo id.
Thumb module now directly referencing resized image. It is not good, because user will loose ability to open a new page of the thumb itself. Alternative would be to use rel or rev attributes which are standard and put relevant info there.
You are using rel attribute today and populate it with "history", what is behind it?
@tkott: yes, thumbnav is a module available here.
Posts: 129
You rock! Thanks will give this a try.
Posts: 129
Serge, I was asked to provide the modified version and did it without checking with you first.
Sry, wasn't my smartest idea. The glory for the wonderful theme should be all yours.
I just want to encourage the discussion about Ajax in general.
If required I can also provide you a got patch, so that you can easily see the changes.
Posts: 2466
Dave, if you can keep me in the loop, I would appreciate it since I am waiting for final version.
I have modified thumbnav module to incorporate your idea about using list instead of just links.
you can see new implementation on my web-site
Posts: 129
@Serge: Yes, I will.
@all: I'm having issues with the REST API call. I get a lot of 'Deprecated' warnings with the client-sample that's provided & finally a kohana-exception. Is anyone else having the same errors/warnings?
I'm using PHP 5.3 & installed via PEAR:
Anyways, I will try it again tonight with a fresh install of RC2.
Posts: 127
Hi Dave,
How about extending the controller for getting the required data? That way you can pull just the data you need eliminating the overhead of the REST response. If you want you can have a look at the Navigation Carousel Module, especially the file modules\navcarousel\controllers\navcarousel.php
I'm not really an expert so this might be not the best approach but I personally would prefer if REST is left out of the equation.
Let me know what you think,
Uli
---
Build bridges not barriers.
Posts: 129
I will check the module you mentioned.
But I see one issue in this approach, pls. correct me if I'm wrong:
If we do it in the controller this means that we have to send all data upfront to the client (e.g. all image-titles, all descriptions, all exif-infos, ...)
For albums with e.g. 100+ pictures, this will slow down our performance, wouldn't it?
For this reason I wanted to have only the bare minimum of information sent to the client whenever he enters the 'photo-page', the rest then upon request.
What do you think about this?
BR,
David (not dave ;))
Posts: 16504
I don't see it on your site that used for the GreyDragon demo. Can you provide a link to that? I'd like to see the change.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here
Posts: 127
OK how I imagine it is that you indeed only send the bare minimum to the client. Upon request (load next image e.g.) your javascript calls your controller (e.g. http://yoursite/gallery/ajaxview/itemid) and it passes just the information you need in the format you prefer.
---
Build bridges not barriers.
Posts: 225
@hukoeth,
Could you explain a bit more. I wasn't even aware you could do that! Do you mean that if you have a file ajaxview.php in the modules/ajaxview/controllers/ folder, you can specify a function to call via http://yoursite/gallery/ajaxview/itemid?
Or perhaps just an example of this working?
Thanks,
Tomek!
----
Publish on Gallery 3 (WLPG Plugin) | XMP Module
Posts: 127
Hi,
Yes that's more or less it (well there is a bit more to it than that but the principle is correct). I don't have time right now to explain this in great depth (plus I am a n00b on this myself ;-) ) but have a look here: http://docs.kohanaphp.com/general/controllers
If you want some examples in Gallery then have a look at Navigation Carousel or Tag Faces (or any module that allows to change settings on the admin pages.
Regards,
Uli
---
Build bridges not barriers.
Posts: 2466
What do you mean?
look, for example, here - in div.g-thumbnav now I am using ul-list.
Posts: 16504
Sorry Serge, when I saw you guys talking about "thumbnav" I got one of the carousel modules stuck in my head. Thanks for clarifying.
____________________________________________
Like Gallery? Like the support? Donate now!!! See G2 live here
Posts: 129
Uli, you rock.
Modified my prototype so that it's able to reload title and description of an image and added back/forward buttons. Prototype is now based on Greydragon-2.3.1.
So here's my approach:
'On-Image-Reload' ( reloadData(id) ) I'm sending the Item-ID to the controller GreyDragon_Controller.
This one fetches Title and Description and send's it back json-encoded.
Now the cool thing: The controller sends back the element, a selector and the new value. By doing this the controller can send as many information as needed and the client-javascript replaces the elements on the website. I think this is a very simple & flexible approach. What's your opinion?
See it in action here.
Pls. give it a try.
BR,
David
Posts: 127
Wow this is awsome!!! It works on my installation just fine. Only problem I see is to get other modules to work correctly. It would be cool if there was a way that the controller could figure out what information is used on a normal page load and send all of it...which then just leaves the JavaScript which needs to know where to update the DOM... complicated. Maybe the devs can give some pointers?
---
Build bridges not barriers.
Posts: 129
Uli, you're right (again).
I think we should discuss the 'session-handling' first with the core-team. Right now I'm doing this via the #URL-POSTFIX.
This is one way to do it, but ideally there would be a generic way how gallery3 maintains the session without a hard-coded-url.
Posts: 129
Hi Serge,
Here an update version:
I encountered 1 problem though:
Could a more experienced developer pls. check line 189 in ui.support.js? Now that everything is in a javascript file (not a php-file like photo.html.php anymore), I cannot make the call to the controller generic!!!
How can we handle this best?
Thanks,
David
Posts: 2466
Just did quick test:
* look great
* navigation arrow buttons are not functioning for me (IE8)
* PS: I will be merging some parts into next release of the theme
Posts: 129
@serge: did you use the jquery.galleriffic.js that's bundled within my zip-file or did you use the standard-one?
Posts: 2466
I was looking at your web-site
Posts: 129
can u try again? cannot test ie as i'm working on a mac (seems to work now in safari and firefox)
Posts: 2466
nope, does not do anything when clicking on the button
looking at the source of the [next] button - href="#+MG+4644"
Posts: 129
can u try once again?
Posts: 2466
much better!
next step to make the paginator (numbers in top left corner/Photo page only) to work the same way as Thumb navigator. Highlight would have to be adjusted (some DOM manipulation to remove/add link)
I now need to think what to do with preview functionality (popup window opened on click in current theme's version) you have removed in yours
Posts: 129
serge, i will look into the navigator this evening. my plan is to modify paginator.html.php slightly to achieve this.
what do you mean by Highlight? Activation/Deactivation of buttons?
Will keep you posted about my progress!
Posts: 2466
ok
active page number in paginator
Posts: 129
serge, here my first draft: what do you think?
my idea is simple:
need your help on this:
can i get in MY_Theme_View.php on line 217 the item position somehow? i would need this, so that the right item pops up on the photo-page when you click on an item in an album.
Posts: 2466
seems to be working, but
Posts: 424
hmn..I can't get the theme to even work properly with the greydragon zip that was attached in this thread.
http://gallery.andrewshemo.com/index.php
I also uploaded the shadowbox from the modules page and the thumbnav module that was uploaded in this thread
Posts: 129
@serge: paginator isn't fully working ... i'm aware of this.
(cannot devote a lot of time, due to work).
#1 ... first item in the top left corner of the album page
#2 ... second item
#3 ...
@shemo725:
where's your issue? i went to your site and i can iterate over your pictures. BBCode Links?
i hope to have a version that supports the paginator in the top-left corner rudimentally soon.
Posts: 337
Any chance to get this working independently of GrayDragon theme? (i.e. make it as a module.)
Posts: 424
@ dave..a bunch of stuff isn't working.......there's no login option on the main page, the albums aren't having any hover effects, the top menus don't have any drop downs and there's a bunch of white dots near the sidebar..see the attachments.
Posts: 2466
@mamouneyya: From what I have seen so far: I think it would be very hard to make it a module, at least at this stage. There is a lot of core code modifications in the theme. when code is stabilized, then there could be a chance to make it more abstract.
@Shemo725: please note that it is highly experimental code while we are finding right solution for navigation and stuff.
But we are getting there
Posts: 129
100% agree with serge: use the released greydragon-theme from serge and you will be fine for the time being. this is highly experimental ... with a lot of hacks.
@serge: can u help me with the position (the rank) of an item within an album? this might also fix some of the issues from shemo75 ...
Posts: 2466
look at original theme's photo.html.php
it enumerates list of images for the page and build a hidden list (you have did not introduce/removed this code in yours)
I would suggest to use indexes all along instead of encoded descriptions for navigation.
Also it would allow you minimize changes to the page as well since you can enumerate list of items where class is g-sb-preview - used by photo slideshow today.
Posts: 129
original is wind or greydragon?
Posts: 2466
greydragon
Posts: 129
serge, agree to you're statement about ids. switched it back to a version that's based on item-ids.
check it out here.
main problem that i see right now are the … in the current paginator. to set them correctly with all those dom-manipulation that we are doing is tough. How could go about them?
Posts: 41
I thought I'd pipe in and let you know that I'm also interested in this theme. I saw your test site and it's pretty much what I hoped Gallery would do when I recently downloaded it. I like the simplicity of the slideshow and the ability to keep the thumbs and main display visible from photo to photo without scrolling down in the browser.
I'm not sure it's part of what you're doing, but it would be nice to make the thumbs a little larger and maintain the ratio aspect.
Keep up the good work!
Posts: 2466
@rross: i would suggest you try the theme by itself.
Aspect ratio could be kept by using proper theme settings.
David is doing a great job adding "inline" functionality for the theme, and as soon as it become finalized, it would be introduced into main line.