akJoomGallery : simple image gallery for Joomla

Posted on

Update: released the  version 1.1.0 with updated prettyPhoto and jQuery plugin. Download link below now links to updated version. If you need to download the old version from google code.

Adding image galleries inside your Joomla! pages is now super simple with the “akJoomGallery” Plugin.

You don’t need a specialist knowledge to use this mambot/plugin. akJoomGallery allows you to use images in your content item as image gallery. With it’s help you can convert any content item/page into a cool image gallery.

The idea for this plugin came to my mind when we needed to show a quick image gallery to client, and we need something lightweight, with more control over how the image is shown in the gallery page itself. We could have used other big gallery components but I was not interested in something simple and quick. Check out the implementation of akJoomGallery.

akJoomGallery

This plugin is best suited to those situations where someone want’s to add few thumbnails while writing the content, and would like to display the large size images when users clicks on them, without leaving the page.

How To Install

  1. Just download the akJoomGallery plugin.
    1. [download#8#nohits]
    2. [download#9#nohits]
  2. In Administration panel of Joomla goto Installers ->Mambots(for Joomla 1.0.x) or to Extensions -> Install/Uninstall(for Joomla 1.5.x) .
  3. Upload this package file and Install.
  4. Now go to Mambots -> Site Mambots ->akJoomGallery or Extensions -> Plugin Manager->content – akJoomGallery and publish/enable the plugin based on the version you are using.

akJoomGallery: Simple Image Gallery For Joomla

Now, enjoy the simplest image gallery with lightbox effect.

Are you satisfied with your knowledge? No, then spent 15 minutes every day on PHPCamp.net a knowledge sharing website for our own PHP community

How To use

The concept is simple, next time when you are adding a image in the post or page, just remember to link you image to full size image, or to image that you want to show in the Gallery. You may want to check “title” attribute of anchor tag, this will be displayed below the image as caption in the image gallery.

Here is an example.

<a href="images/stories/joomla-dev_cycle.png" title="joom development"> <img src="images/stories/joomla-dev_cycle.png" border="0" /></a>

“title” in anchor tag will show below the images in the gallery, while “href” is the link to bigger image that needs to be shown in the gallery.
At the end of content item/page just add {akgallery} to tell the plugin that this page contains images that needs to be shown as gallery.

How to use akJoomGallery In joomla 1.5

This mechanism gives you, the content writer, more control over way thumb images are being displayed on the page. You choose and format you images in the gallery page. Once the user clicks on the image it opens all the image in a javascript based gallery with lightbox effect.

Credits

I will say all credit goes to Stephane Caron for creating, simple to use, prettyPhoto plugin that made this possible.

Please leave a comment if you need any sort of help with this plugin.

Update(13-7-2008): Fixed issue identified by Kim and asdftiger in comments below. I would like to thank asdftiger for help provided for identification of the issue. Links above(in how to install section)  now points to updated version.

94 thoughts on “akJoomGallery : simple image gallery for Joomla”

  1. I love the new akjoomgallery but I can’t get the picture captions to work. I’m using a “title” anchor as you suggest but its not showing up under the pic in the lightbox. Any suggestions?

    Thanks!

  2. cliff,

    where can i check it? or, can you post the code snippet where i can see it.

  3. I am verry sorry, but the plugin won’t work in my Joomla 1.5.3 installation.
    I have installed it, activate it, put some photos in an artikle, put the text {akgallery} there, but there’s no gallery.
    Can you be more specific with some print-screens how to deal exactly ??
    (with the anchor tag thing and href)

  5. Hello Amit,
    Thank you for the extra print-screen ! Its making a lot more clearly.

    First i was trying things out whith “Insert/edit anchor”, because its somewhere in the “How to use” text, but when i saw youre second print-screen it became clearly that i need to make a link (insert/edit link) to the larger foto. So that is working right now, is looks very nice !

    But, still having a strange problem. When i put in an album with for example 4 pictures, and I click Next, in the last picture there is also an Next option, but there are no next pictures anymore, so after clicking next the screen will remain white with the loadingrotation animating continuously….. Any idea ??

  7. This is nice stuff! I wasted full day going through all different kinds of image gallery extensions for Joomla!. All others were either too complex for my needs, or they just did not work because of some odd bugs or whatever.

    akJoomGallery was the first gallery extension I found which was nice and simple and just works!

    And it is free as in free… not crippleware like some other gallery solutions where you get essential features (like image captions) only when you pay. I am using it to display screenshots on a free software site for a program I have developed, so I don’t feel like paying for the tools I use to create that web site…

  8. Where is the download link for the plugin?… after 20 minutes of examining this page I still could not find it 🙁

  9. @vygandas : first two lines in “How to install” section are downloads links to respective version of Joomla.

  10. I can’t get this to work 🙁 I’m using version 1.5. It’s installed and enabled. When I place {akgallery} on the page, the text stays there and the image links like a normal link. I’ve reviewed all screen shots. Any ideas?

  11. Kim, i will need a temp access to see a demo page where this is happening. Only then i will be able to help you.

  12. I can’t seem to get this to work either. I’m running into the same problems as Kim.

  14. Thanks for the quick response!

    I ended up getting a different lightbox to work. Does akJoomGallery require prettyPhoto to use the {akgallery} tag?

  15. I will look into this on weekend, it would be gr8 if you setup a demo page(hidden url) and give it to me on my email. that will help me debug it. Thanks.

  17. Hi,

    Great plugin, didn’t take too long to work out, 1 question, my joomla website has a white on black theme so I can’t see the image caption when expanded – is there any way to change this?

    Keep up the good work.

    Mick

  18. I think that this plugin is great, it lets me introduce really interesting effects to my texts (linked images to a text, or simple a new view of the thumbnails that are in my articles.

    It just works as it is supposed to be, but i also like to recomend a kind of organized manual or documentation not so brief for begginers, because i had some little and small troubles at the begining when trying to implement for first time the gallery in an article.

    And I reapeat, this is GREAT!

  19. @mick,

    right now their is no configuration option, but you can edit the css file ‘prettyPhoto.css’ in “pluginscontentakJoomGallerycss” director.

    @Emmanuelle,
    I will try to write something more when i have some time.

    thanks for nice words

  20. Hi,

    Thanks for the reply, I tried changing all colours but cannot find one which changes the font colour, any adeas?

    Mick

  21. @mick, In prettyphto.css create two css classe ‘description’ and ‘currentText’ you can then give font color to both of them. they will be applied to description and photo count.

  22. Sorted, many thanks Amit you are the man 😉

    I have tried a lot of galleries but yours is by far the easiset and best to use!!

  24. the problem is in file ‘azrul_ajax.js’, check out the javascript error in the console.

  25. I think this is a great plugin! But, is there anyway instead of the lightbox view, that when you click on an image, it can link to another content item in Joomla?

    Thank you!

  29. Hi,
    I’m working with Joomla 1.5.7
    When using your plugin in a Joomla article it works fine, but I would also use it in several components or modules that I create myself (with php files). Is it still possible to use {akgallery} like that in the code? If yes where? For the moment it does only write {akgallery} on the website page instead of working as plugin.
    An idea?

  30. it will not work in custom plugins or components… it is designed to work with content pages only. you can look into the code of component and modify.

  31. hello, how can i activate this on the home page of joomla 1.5.7 ?
    it workd fine on the articles but not on the main page what to do ?
    thanks.

  32. Hey

    Nice to see a good plugin
    I seem to be a bit stuck…

    I have installed plugin no probs.
    in my “article” I put the code {akgallery} at the beginning of the content (also tried at the end)
    Then using a table wanted to add my images – thumbnail and large.

    So I used your code above and href points to large file hosted externally and the smaller also.
    Then I save the article and view that in my browser and I get nothing, then upon opening properties for that image again in article editor it has removed all the code and only left /images/thumbs/****.jpg

    I am a beginner mostly but if you see something I am doing incorrectly I would must appreciate some input 🙂

    Many thanks
    Stretch

  33. @stretch in Joomla editor you do not put code directly, instead you use Insert Image button in the toolbar,and then you use create link button from the toolbar to create a link.

  34. OHHHH that makes so much sense 🙂
    thanks muchly for speedy response I will have a crack now and if successful will post web address for anyone to have a look

    Thanks again

  35. sorry for another question :/

    I have in top of the article;
    {akgallery}

    Then have inserted an image (pointing to my server)
    Then clicked that image and created link

    I tried two different things here
    1st. Link direct to large image
    2nd. That code you have above changed to href my large image and also the thumb on my server

    1st. Result was the thumbnail showed on article as expected but clicking on the image (link) just went to that large image on the hosting site not opening up in image gallery 🙁

    2nd. I add the entire code into the link with adjustments to my locations then when I hit save and try and view that I get an error…
    going back to edit that link again shows all code gone and only left with the link to large image

    AHHH I will owe you a beer after this sorry to be a pain

    for reference running Joomla 1.5.7

  36. send me the url, so that i can see what is being done wrongly. Please choose the option1 to set things up.

  37. Hello, thank you for such a nice plugin. 🙂

    I have an issue though… if we use http://www.website.net as URL, the lightbox effect works perfectly good. However, if we do not prefix “www” like website.net, the lightbox effect does work. Maybe someone can point out how to resolve this. Thanks! 🙂

  38. Hello, thank you for such a nice plugin. 🙂

    I have an issue though… if we use http://www.website.net as URL, the lightbox effect works perfectly good. However, if we do not prefix “www” like website.net, the lightbox effect does work. Maybe someone can point out how to resolve this. Thanks a lot! 🙂

  40. Hi,
    Are you the author of akreservation?

    if yes i need help to convert it to joomla 1.5 legacy (we have only problem with the mambot that is shown as it as {akreserv,VCHDEAF} .

    thanks
    luc

  42. First of all: very nice work!

    I have one problem. When I use a layout in Joomla that displays for example 2 articles, and both articles have the {akgallery} part in it, it doesn’t work. Lightbox comes up, but no images are displayed.

    I would really like to get this working..

  43. Long text (high) in browser Opera 9.62 will show popup image in bottom. This is a problem. I use Joomla 1.5.8

    Sorry, for my bad england i’am russian.

  44. Thanks for a great plugin!
    Very useful, and you have a lot of control.
    The only problem is when using PageBreaks, with images on several pages.
    If I insert one single {akgallery} I will only get it on that single page, and not after a page break.
    But if I add an {akgallery} tag on each page it all gets terribly messed up if I switch to View All pages.
    Any solutions for that?
    Can it be told to neglect all “surplus” {akgallery} tags if nmore than one?

  45. This thing is great! Very easy to use. Had a bit of a hiccup but after I remembered to Enable the Plug-in via “Plug-in Manager” it worked great. Thanks, this thing is great!

  46. I now appaarently have the same problem as mxa:
    In Opera 9.62 and 9.63 the screen darkens, but there is no prettyphoto popping up. If I scroll down the page gets longer and longer the more I scroll, and I can see glimpses of the image trying to “escape” from the screen by scrolling further down as long as I keep on scrolling. I never can catch it though.
    I tried to replace the prettyphoto.js with the newest version, but apparently it is not possible to just replace it, because it contains some new function etc. It akJoomGallery simply didn’t work with it at all.
    Pity, because I really liked the functionality of akJoomGallery a lot!
    But as Opera is my main/favourite browser I can’t use something that doesn’t work there.

  48. After downloading the newest version of prettyPhoto (v2.2.2) and some fiddling (due to lack of php/Javascript knowledge) with the akJoomgallery.php and prettyPhoto.css it now works fine also in Opera 🙂

  49. Hello, first off thanks fot this neat plugin. I was searching for a plugin that could display the entire gallery thumbnails (linked offcourse).
    I just wanted to add to an article something like {plugin catid} and it should show all the image thumbnails of the galley, the ID I used.
    So my question is: Can I achieve something similiar with this plugin or not? If yes how, because I can’t figure it out 🙁
    Thank you in advance

  50. I think something like the below should keep the plugin from crashing badly when page breaks are used but all pages of an article are shown. The idea is that the url will show if all pages of an article are shown, with ?showall=1. The request can be used to check this. If so, preg_replace with a limit can be used to erase all but one of the plugin tags inserted for each page between the page breaks of the article. The limit can be made by deducting 1 from the count returned by preg_match_all.

    Unfortunately I cannot find out if it does work. This plugin has the unfortunate peculiarity that if I change anything at all, even if I insert something as trivial as $justanyvariablename = ‘justanyvalue’, the plugin crashes the whole website for this reason: [i]PHP Parse error: syntax error, unexpected $end[/i]. I have never experienced that with any extension, and I’ve given up but I hope this helps someone make the plugin fully functional.

    Anyway, what I think would work is this:
    [code] $pagewithbreaks = JRequest::getInt (‘showall’ , 0);
    if ( $pagewithbreaks == 1 ) {
    if (preg_match_all(“#{akgallery}#s”, $row->text, $matches, PREG_PATTERN_ORDER) > 1) {
    $allbutone = (preg_match_all(“#{akgallery}#s”, $row->text, $matches, PREG_PATTERN_ORDER)) -1;
    $row->text = preg_replace( “#{akgallery}#s”, ” , $row->text , $allbutone );
    $html = ”

    jQuery.noConflict();
    jQuery(document).ready(function(){
    setupImages();
    prettyPhoto.init();
    });
    function setupImages()
    {
    jQuery(“a[href$=’jpg’]”).attr(‘rel’,’prettyOverlay[gallery]‘);
    jQuery(“a[href$=’gif’]”).attr(‘rel’,’prettyOverlay[gallery]‘);
    jQuery(“a[href$=’png’]”).attr(‘rel’,’prettyOverlay[gallery]‘);
    }

    n“;
    $row->text = preg_replace( “#{akgallery}#s”, $html , $row->text, 1 );
    return true;
    }
    } else
    // if (preg_match_all(“#{akgallery}#s”, $row->text, $matches, PREG_PATTERN_ORDER) > 0) etcetera
    [/code]

  51. my joomla is 1.5.9.
    It could work on IE7, but the height is not enough that I can’t see the close button and title. (1024*768)

    Not work in Firefox 3.1. It surprised me since it use jQuery which should work in all browsers. Maybe it’s due to the old version.

    Thanks anyway.

  53. I am unable to find the download links.
    I read through the reply posts and noted where you said ‘first two lines in “How to install” section…’
    However, this is what displays there:
    [pre]
    How To Install
    1. Just download the akJoomGallery plugin.
    1. [download#8#nohits]
    2. [download#9#nohits]
    2. In Administration panel of Joomla goto Installers ->Mambots(for Joomla 1.0.x) or to Extensions -> Install/Uninstall(for Joomla 1.5.x) .
    [/pre]
    there is no linkable text, just the strange ‘[download#N#nohits]’ which looks like some broken PHP/SQL refrence.
    I have checked this in both I.E. 7 and Safari for PC. Same thing on both.

    • hi Qasimtoep, sorry the download plugin was deactivated for some time, you can see the links now.

  54. Great work Amit

    Just in case someone else has the same problem as me. Some of my already uploaded photos are titled in uppercase so it took me a while to work out why not all would open in Lightbox. What I did was to add the uppercase extension to akJoomGallery.php
    in /joomla/plugins/content/ like this
    jQuery(“a[href$=’JPG’]”).attr(‘rel’,’prettyOverlay[gallery]‘);
    The same could be done for .GIF and .PNG etc.
    Perhaps this will help someone.

    Cheers

  56. Can this plugin ONLY insert one thumbnail into the Joomla article content?

    I think you can add a new feature: when user insert {akJoomGallery id=xxxx}, this plugin can show a thumbnail which has the id=xxxx in JoomGallery into the Joomla article content. If visitors click on this thumbnail, the larger image can be opened with a lightbox pop-up, or, just go to the JoomGallery detail view. Of course, you need to set parameters in this plugin to allow user choose which method to open the larger image.

    Thanks for this great plugin.

  57. Hello!
    I loved this plugin… but the thing is that all the other stuff in my site that uses mootools stoped working!

    How can I solve this?

  59. Hi Amit,

    I’ve had this working before but since moving to new ISP its stopped working? Any ideas, image shows and {akgallery} isn’t showing so plugin is working, just image is displayed on a new blank page.

    Thanks

  61. Is this possible to use this gallery for a folder/directory inside stories?
    I want to show a complete folder instead of putting single link… I am sing YooGallery now.. which is perfect.. but need to know if this plugin cud give better performance… thnx

  62. Hello all AkGallery experts. Firt of all, THANK YOU, AKGALLERY CREATORS FOR THE GREAT PLUGIN. Look, I’ve got an issue here. I am trying to exclude one image from the AkGallery. Means I don’t want this image to show up when hitting NEXT, NEXT… Is there a way on how to instruct AkGallery to skip an image?

    On thousand times THANKS!

    Best regards,
    Vlad

  64. Is there a maximum quantity of pictures for the gallery?
    I have entered 2 of these and the small one works, but the larger one will not load the images in the lightbox.

    Please help! I love this plugin!

  67. Hi,

    I read all comments and it seems to be a good plugin. Exept that when I installed and activated it on my jommla 1.5 site following all your instructions, added {akgallery} at the end of my article but it didn’t work at all…
    Could you help me please ?

    Thank you

  68. Hi, this plugin is just what I am looking for, problem is I cannot get it to work. I insert anchor/link to original image into thumbnail, but when I insert {akgallery} into my html it just shows as text on my page. No light box pop up. Any help would be appreciated.
    Thanks in advance
    transco

  69. Hi, just spent another couple of hours on this. Still no luck. I am using JCE editor, Using advance link capability to make the link. Under the advanced tab on the panel I find Entry “relationship page to Target” in the drop down menu I can select “Lightbox” which I assume is taken from your plugin. Your instruction on placing
    //At the end of content item/page just add {akgallery} to tell the plugin that this page contains images that needs to be shown as gallery.//

    I have tried putting {akgallery} on the page. All I get is in text {akgallery} alongside the thumb

    I bought s/w as it looked real simple to install. Iour help please.
    Thanks John

  73. Can’t get it to work with 2 galleries in one page. I have one gallery of 5 images, works fine. But when I added another link to a separate image in the same page. It does not work… maybe it’s better if we can wrap the image group you want to show like {akgallery}gallery1{/akgallery} etc./and so on… so we can display multiple group of galleries or even single images in one page.

    This is a great plugin though!!! thanks for the author….

  75. I’ve installed it and it works, but images are loaded slowly. Is it simple to modify the code in order to speed up the image display process ?

  76. Sorry … I’ve understood the problem. I have to make the images first of all small, and then mainly of the same size so that the program does not have to do too much processing. Now it works perfectly.

  77. May be I’ve found a bug. I’ve tested with Firefox 3.5.8 and Joomla 1.5.15

    If you open the fotogallery starting from the last photo, you have to click “Prev” three times, before you manage to reach the previous photo.

  79. Great plug-in, works well. Unfortunately causes conflict with mootools on pages where there is no {akgallery} tag, since jQuery.noConflict() is not generated, but scripts are still included.

    If you move the addStyleSheet & addScript lines inside the if section, the problem is solved.

    Keep up the good work.

  80. Looks exactly like what I am looking for. I have to idea what to put between {akgallery}{akgallery} to get something like you have on the demo site under “South Stand Demonlition”.

    Hope this isn’t another great tool that just lacks some decent examples fpr use in JOOMLA 1.5.

    Regards from a very confused german,

    Robert

  81. @robert well .. you don’t need to put anything between the {akgalley} tag, you just need to put {akgalley} at the end of page which contains your gallery images, that’s it.

  82. Hi, thanks for the answer, but I still don’t understand. How did you do it so that you show one picture and after clicking on it, the “show” starts.?
    Regards,
    Robert

  83. Hi, still trying to understand it. Unfortuanately both pics above (How it works… and the other) both give me an error “Not Found. Sorry, but you are looking for something that isn’t here.” So I can see only the thumbs and not the original images of these two pics on your site. Was hoping they would help me along. 😉 Regards, Robert (I do manage to show pics, but I want to do it like you did it on “Eden Park”.)

  84. Hello! At the begining thank you very much for creating such a grate plugin. 🙂 I have one question. I was trying to invent something to make this change but my ideas doesn’t work. I would like to make big image – bigger than default , after clicking on thumb. Also if possible remove prev and next because I dont know why it doesnt work on my website. I will appreciate your answer. Greetings form Poland. 🙂

  86. hey!!!good gallery!!!but i dont know how to use it…after i installed and publish nothing’s work..there’s something that i could configure…i want to publish in my article at my portfolio but i dont know how put in my article….PLS HELP!!!!

  87. I love akgallery and use it a lot. However, it would be really nice if there was a Print button which would allow one to print the image. I am now forced to look for another plugin which is a pity. I really like this one. Does any one out there have a solution for including a print icon?

  88. Hello! Greetings from Russia! I installed this plugin and found it great, but it doesn’t work in opera!=( I use the latest version of this brawser(10.53) and the problem is: when i click on photo it doesn’t “fly” in front of the page or in it’s center, but goes down and is situated in the bottom of screen// In other brawsers it works perfect. Can u help me to fix it?

    sorry for my bad english=)

  89. hi am using this plug-in from many day. it work fine but now i face a problem i have some images that is size is 60px x 60px. but it’s description is 4line at least. now if i click the images it open in the light box and resize it to the images size. now my text become looooooong height.

    Is there any way i can open the light box to a fixed size like
    width:300px;
    height:300px

    some thing like that.

Comments are closed.