Hi,
Inspired by floridaves Album carousel module I have written a new one which displays a carousel under the picture on photo pages.
However since this is my first time I actually did something like this I would be happy if someone could have a look at the code and maybe help me clean it up.
OK enough with the talk here are the features:
- Based on jCarousel written by Jan Sorgella
- Displays a carousel below or above the picture of photo pages (see screenshot)
- Carousel size and thumbnail size configurable
- Dynamic loading of thumbnails using ajax
- Active image is centered and highlighted
- Tested with RC2 in FF3.6, FF4b1, IE8 (I don't have IE7 or IE6 to test), Chrome 5/Chromium and Opera 10.60
---
Some things you should know:
- Needs some work for Opera (highlight doesn't look right) and maybe a nice mouse over effect for Wind theme
- I don't have much experience coding ajax so please consider this as beta
- If you have or had any module enabled that shows content under the photo (e.g. comments) it will display under this content. I fixed this by changing the id of the comments module in the database but maybe there is a better way of doing this?
---
Known issues:
- Shows under all modules that display under the photo if installed after this module (if you are using the latest github code of gallery you can use the module "Module order" to fix this. It will not work in RC2)
- The scrolling and positioning is sometimes a bit off when reaching the last item depending on the size of the carousel and number of items to be displayed. If you see this problem you can disable dynamic thumbnail loading in the admin options of the module.
---
More information can be found on the codex page of this module.
Hope you like it and someone can help me perfect it.
Regards,
Uli
see update: http://gallery.menalto.com/node/97124?page=2#comment-367363 -moderator
[img]http://gallery.menalto.com/files/navcarousel.jpg[/img]
Posted: Mon, 2010-07-26 16:47
Posts: 27300
Thanks for the contribution. looks good. I have created a codex page: http://codex.gallery2.org/Gallery3:Modules:navigation_carousel
Please update as you see fit.
Will test later.
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 51
awesome module.... thank you hukoet
Posts: 127
Thank you. Unfortunately I have discovered a problem with circling. Once you go past the origin the carousel starts acting really weird. I'm not sure if it my code or if it is a bug in jCarousel. After all, a circular carousel with dynamic image loading isn't your day-to-day application.
I'll investigate and keep you updated.
Posts: 51
cannot work for me hukoeth, i using Grey Dragon Theme 2.2.1....
[img]http://gallery.menalto.com/files/Navigation%20Carousel.JPG[/img]
Posts: 127
Ok I have been looking at the jCarousel documentation and I think I should be able to fix the circling issue as it seems to be in my code. As for Grey Dragon theme: as far as I understand, it is very different from the standard theme. I will see if I can make it compatible.
Please be patient with me as I am very new to this. I will try to have a new version ready by tomorrow.
Posts: 127
I have updated the module to version 2.
Changes:
---
Known issues:
---
@glodakan: Can you try the new version please. It works for me on Gallery RC2 with Grey Dragon 2.3.0. I don't have 2.2.1 as Serge updated the download link already.
Regards,
Uli
Posts: 27300
hukoeth,
I have finally got round to testing this module and have zero success on both versions.
Here is what I found:
in views/navcarousel.html.php
$output = str_replace("src=\"", "", $output);returns:
/gallery3/var/thumbs/_MG_8087.JPG?m=1280118849" alt=" MG 8087" width="200" height="128"/>
then the next line:
$output = stristr($output, "\"", True);returns nothing.
I am using PHP Version 5.2.13 so I think that is the issue is: before_needle {True} in stristr is not yet supported.
I can see the carousel but the image src is blank.
Example: http://www.langleycom.com/gallery3/index.php/2nd-level/1
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 51
the image src is blank hukoeth,
[img]http://gallery.menalto.com/files/Navigation%20Carouse%202.jpg[/img]
Posts: 127
Hi Dave and glodakan,
I have updated the file in the first post to version 3.
@Dave: Thank you so much for pointing this out. It would have driven me mad to figure that one out. Since I finally found what I was trying to do with string manipulation (get the url of a thumbnail) in Gallery and replaced the whole code.
I have tested on PHP 5.2.10 and it seems to work (fingers crossed).
Here are all changes I made:
---
Since I removed and renamed a few files I recommend that you delete all old files before copying the new ones to your installation.
I hope I got most of it right this time. Many thanks again for testing.
Uli
Posts: 51
Thank you for update but same problem for me hukoeth, i already update the navigation module but in admin/modules still version 2 not version 3...
check link here hukoeth http://pamer.in/Others-Wallpapers/august-xm
Posts: 127
Hi,
Not sure what went wrong here but on your site I can see that you have indeed still version 2 installed. I just downloaded the zip from the post and it is v3. I have renamed the zip file and re-uploaded to avoid confusion and caching issues.
Can you try again, please.
Sorry for this,
Uli
Posts: 51
Hi hukoeth thank you its work, awesome navigation for gallery.
But i still have question how if i actived Comment module is crash position with navigation carousel and when i checked "Show carousel above photo" im losing navigation carousel (blank).
Thank you hukoeth i hope you can help me.
Posts: 127
The positioning of navigation carousel vs. comment module is indeed a problem and I have not found a decent solution for it. To make the comment module appear under the carousel on my installation, I changed the id of the comment module to a higher (free) value as the id of the navcarousel in table modules in my sql database. But this is not the most elegant solution nor do I know if it has any other consequences.
As for the problem with the carousel on top: I cannot reproduce this on my installation (see screenshot). The html code used is exactly the same only that it inserted using photo_top() instead of photo_bottom().
[img]http://gallery.menalto.com/files/navontopgreydragon.jpg[/img]
Posts: 127
Hi glodakan,
After having a look on your site I have found the problem why the carousel is being displayed on top of the comments module in Grey Dragon. I have changed a few things in the css positioning of the nav carousel which should address this without messing up other themes (link in first post).
It will however not address the fact that the carousel will be placed below the comments module.
Regards,
Uli
Posts: 51
Hi Hukoeth.
Wow its awesome module for gallery thank you hukoeth, i put above photo its really really good looking... hehe.
Thank You Very Much Hukoeth.
[Best Recommended Module]
Best Regards,
Putra
Posts: 127
Glad to hear that it finally works and that you like it
Posts: 573
Unrelated to your module, but where did you get that "recent items" sidebar module? is it part of the theme you're using, and if so, which theme?
--
For PHPNuke, phpBB2, and phpBB3 integration help, please visit NukedGallery.net.
[img]http://www.nukedgallery.net/signature.jpg[/img]
Posts: 573
Also, i've noticed that it doesn't quite work as described in the "clean canvas" theme...no highlight of the current image, etc...
--
For PHPNuke, phpBB2, and phpBB3 integration help, please visit NukedGallery.net.
[img]http://www.nukedgallery.net/signature.jpg[/img]
Posts: 127
Hi,
The recent items is part of the Photowidget module.
As for the problem you are describing: Can you post a screenshot or a link to your Gallery installation. The Highlight should work correctly in all modules. The hover is a bit subtle on clean canvas.
Thanks,
Uli
Posts: 127
I just installed Clean Canvas (I use Clean Canvas Wide) and here is what I get
[img]http://gallery.menalto.com/files/highlightedimageoncleancanvas.jpg[/img]
Which is how it supposed to look. Please let me know if you see different results on your Gallery installation or if you expected something else.
Thanks,
Uli
Posts: 51
hi hukoeth
why alt tag in <img> could not be display (blank).
http://gallery.menalto.com/node/97124#comment-349138
thank you
Posts: 127
Good point. I will add the image title there in the next update.
Posts: 27300
Great job! V3 works for me now.
Glad I could help out on this module that is far better than what I did.
I noticed you changed lots and am glad you changed some of the JS function names.
Perhaps on the next release you could change the the visibility or opacity of the navigation arrows when you reach the end. Just to give the user some indication that he has reached the end.
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 573
Ah, I was thinking that the image would highlight when you did a mouseover, not just the current image being highlighted. Thanks
--
For PHPNuke, phpBB2, and phpBB3 integration help, please visit NukedGallery.net.
[img]http://www.nukedgallery.net/signature.jpg[/img]
Posts: 27300
@comments before carousel. You have to manually edit the ID of the album to be lower than the comments module ( or swap the IDs around). We have a ticket for this: http://sourceforge.net/apps/trac/gallery/ticket/1203
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 27300
I just noticed that it does this already. ( laptop at work has poor contrast
)
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 56
Ok, I've tried several versions of this and Dave's version on my two different Gallery installs, one of which uses the Wind theme and the other that uses a modified theme based on RC1 Wind theme. In both cases I can't get either one to work properly. They both interact with Dave's sidebar Carousel, causing all images to be shown in a tall bar rather than a single scrolling one as it should. When they DO actually show their own images, they're in a vertical column off the bottom of the page, rather than a horizontal one. They're also below the lowest object on my tall sidebar, so that's not very helpful either... And finally, when this is enabled, the photo gallery page has no menu! Something's REALLY weird about this combo!
Beo
Posts: 27300
You can't use both at the same time. lots of javascript issues that are almost impossible to diagnose.
Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team
Posts: 127
I'm glad to hear that it finally works and that you like it. I did a lot of changes, yes and I believe there is a bit more to clean up. Thanks for being patient with me ;-)... oh and thank you for the nice words on your codex page
I will think of rephrasing this in the feature description. But maybe the mouse over could be a nice addition. What exactly did you have in mind?
It is indeed very subtle. I was thinking of hiding them when reaching the end like in your module.
Strange. I just tried all three on my install and they work just fine for me. The only two things I noticed: I had to go into the module settings and save them once before either of the carousels showed up and I couldn't get the mouse scroll to work for the sidebar carousel.
I really like the sidebar carousel btw. The auto scroll is very cool!!! Thanks for this module, Dave.
Uli
Posts: 337
This module doesn't work for me. I see the both arrows on the both sides, with a blank area in the middle. I am currently using Firefox 3.6 unders Mac OS X Leopard.
Posts: 127
Hi mamouneyya,
Are you running the current version of the module? Which theme are you using? Could you post (or PM me) a link to your gallery installation so that I can have a look, please?
I am working on an update at the moment with a few new features but I don't want to release it until I have fixed the positioning / scrolling issue. However since I need to work myself through the JavaScript code of the carousel I am using this might take a while.
If you send me a few more details I will be happy to get this version running for you, though.
Uli
Posts: 337
Yep. I have started with the latest version (3.0). I am using Browny Wind theme, which uses, technically, the same Wind theme core files but with different colors/images and some CSS modifications.
I've just PMed you the URL.
Posts: 127
Hi,
I had a look at your installation and it seems that my module is incompatible with right-to-left languages. I will have a closer look tomorrow.
Regards,
Uli
Posts: 337
Aha.. thanks for your time, hukoeth
Posts: 337
By the way, if you could make it flipped for RTL languages then it would be great. By flipping it I mean to make the photos stream starts from right to left rather than left to right. Otherwise, I can live with that.. it isn't a big deal.
Posts: 573
I was thinking something along the lines of the cover flow effect in iTunes...something that the .Mac theme did for G2...
--
For PHPNuke, phpBB2, and phpBB3 integration help, please visit NukedGallery.net.
[img]http://www.nukedgallery.net/signature.jpg[/img]
Posts: 127
My pleasure. I'm actually learning a lot doing this
I will try my best however please be a bit patient. I have little experience with JavaScript and it might take me a while to understand the jCarousel script.
I like the the idea but first I need to fix the positioning / scrolling issue. I will pick this feature request up after that.
Uli
Posts: 337
Maybe this helps:
http://rtl-this.com/ar/tutorial/rtling-jcarousel-jquery-plugin (look at the first comment)
Posts: 127
Very nice this helped a lot, thank you.
I attached the "rtled" version of the module to this post(please download the latest version from the first post) however still with the scrolling / positioning bugI tried it on my install with Arabic and English language and it worked so hopefully it will do the trick on yours as well.
Regards,
Uli
Posts: 337
Unfortunately, it doesn't for me. The same problem happens on my both two installations, on two different servers. As I replaced the module files, Gallery main menu-bar disappeared as well as the carousel of your module. You can take a look at the site I sent it to you.
Thanks for all your effort. I really appreciate it
P.S The main menu-bar disappears just in the item pages, not the home page.
Posts: 127
I just released version 4 of the module with the following changes:
---
I will continue to work on the issue with the positioning when dynamically loading the thumbnails and will post and update as soon I have it sorted out.
The updated version can be downloaded from the first post.
---
Build bridges not barriers.
Posts: 127
I checked your site and I get an http password prompt when trying to access any picture. The prompt seems to happen when trying to access the JavaScript file (modules/navcarousel/js/jquery.jcarousel.js). Can you check that this directory is not password protected?
Also please try version 4. I have moved the JavaScript back to the combined JavaScript code of Gallery. Not sure if this makes a difference or not but you can try. Let me know if you still have difficulties.
---
Build bridges not barriers.
Posts: 127
Sorry forget what I've written before this was actually my fault. Try version 4. This should work.
---
Build bridges not barriers.
Posts: 337
Never mind. It works now. However, there is an issue with albums viewing. The width of the albums that are shown in the carousel isn't the same that you configure from the settings for images. It's too big by default, which makes some overlapping:
[img]http://grab.by/5GNy[/img]
Personally, I would prefer if the module was configured to not show any album in the carousel.. or to make that optional, at least. It's misleading for me, since I used to think that every thumbnail in the carousel is for an item, not a group of items (album.)
Thanks
Posts: 127
I agree. You can download 4.1 from the first post which will not show albums.
---
Build bridges not barriers.
Posts: 337
Wahoo! You are really a wonderful developer
!
Posts: 56
Hey Hukoeth:
Still no luck getting it to coexist with the sidebar carousel. I think I'll start looking at what might be going on with that side of the equation. Same symptom of disappearing main menu, etc. The most interesting thing is that it fails if the module is installed, even if the side carousel isn't sharing the page with the nav carousel. Weird!
Beo
Posts: 127
Hi Beo,
Weird indeed. I cannot reproduce this at all (I even tried IE 6 and it is still working). Can you maybe send me the link to your gallery so I can have a look? Are you getting JS errors at all? Which browser (and version) are you using? Will be difficult troubleshoot if I can't repro.
Thanks,
Uli
---
Build bridges not barriers.
Posts: 127
@Beo: I have just installed a fresh copy of Gallery to test a bit and was immediately able to repro what you are seeing. After a bit of testing I found that I can get it to work when I use the minified version of jCarousel Lite (the script the sidebar carousel is using) vs. the packed version which is shipped with the module. Would you mind giving this a try, please?
I attached the two files necessary to this post:
1. Unpack the files.
2. Copy the file 'jcarousellite.min.js' to 'modules/carousel/js/'
3. Copy the file 'carousel_theme.php' to 'modules/carousel/helpers/' overriding the existing one
This still doesn't explain at all why it does work on my other installation as I am using the unmodified version...
Uli
---
Build bridges not barriers.
Posts: 56
Hi hukoeth:
That was where I'd narrowed the apparent ineraction down to, but that was as far as I'd made it. I installed the fix and while your nav carousel now works, the side carousel still shows shows the entire stack of images rather than the rolled up scroller. You can check it out here[img]http://photos.orionranchobservatory.com/var/thumbs/Astrophotography/M31%20-%20Andromeda%20Galaxy%20-%20100206.jpg?m=1276579222[/img]. I'll check it out on my other page that uses an unmodded Wind theme to see if that makes any difference.
Thanks for all the work.
Beo