Another Image Gallery 1.9 with nyroModal Jquery plugin

[D72]

I would like to share a gallery i just installed and modified a bit.
I use Another Image Gallery 1.9 as my gallery on a website. Only thing i was missing is the well known 'Lightbox overlay' effect.
I read some topics, combined several suggestions and the result is an Another Image Gallery with a beautiful, cross-browser lightbox effect, based on the Jquery plugin of nyroModal.
You could use the Jquery plugin to call, more than photo's. Likely you can open forms with it, videos, html pages etc etc
Look at nyroModal's website for all specifications.

Download my attachement and just install the script from the admin section of websitebaker.
The only thing you have to do manually, is adding the javascripts and one line of the .css in the template index.php

That's all. Hope it works for you too.

Working sample is here.

Code:

<link rel="stylesheet" href="http://www.blablablawebsite.nl/modules/imagegallery/styles/nyroModal.css" type="text/css" media="screen" />

Code:

<script type="text/javascript" src="http://www.blablablawebsite.nl/modules/imagegallery/js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.blablablawebsite.nl/modules/imagegallery/js/jquery.mousewheel.pack.js"></script>
<script type="text/javascript" src="http://www.blablablawebsite.nl/modules/imagegallery/js/jquery.color.js"></script>
<script type="text/javascript" src="http://www.blablablawebsite.nl/modules/imagegallery/js/jquery.nyroModal.1.4.2.pack.js"></script>
<script type="text/javascript">
$(function() {
  $.fn.nyroModal.settings.processHandler = function(settings) {
    var from = settings.from;
    if (from && from.href && from.href.indexOf('http://www.youtube.com/watch?v=') == 0) {
      $.nyroModalSettings({
        type: 'swf',
        height: 355,
        width: 425,
        url: from.href.replace(new RegExp("watch\\?v=", "i"), 'v/')
      });
    }
  };
});
</script>

The last Javascript line is to call youtube videos in the lightbox. SO if you use thiis gallery only to show photos, you could delete the last Javascript.

[instantflorian]

Hi D72,

thank you very much. Works fine.

Regards

-instantflorian.

[Argos]

This is a very nice addon. Why isn't it mentioned at AMASP yet?

[mikirax]

Hi:)

Thanks for this module.

I installed it, but I have problem with flash content on page (it shows up over images).

Do you maybe know what to do?

Is it possible to get your original (uncompressed) code for jquery.nyroModal.1. 4.2.pack.js ?

Thanks

[D72]

Sorry guys i havent mentioned that there were some replies... guess i havent received notifications...

@mikirax
I don't know what might be the reason for your problem. Maybe i don't understand your problem that well.
If you have a look here, you can find in the header a flash element.
When you're browsing the image galery and choose a picture, the flash element is still there and there are no problems with some z-index (elements under or over each other)
So i think i'm not quite sure what your problem is. Havent you got an example to show?

Also i haven't changed gthe 'Modal' javacripts. It should be default as it's available on Modal's website.
You could try to find a Jquery pack at his website and see for your self if it will solve your problem.

Modals Jquery Download section

@instantflorian
You're welcome.
Right now i am testing 'Another Video Gallery' to add the same jquery plugin. So keep fingers crossed. Will make a topic when i'm done with it.

@Argos
Thank you. Actually, it is mentioned by the admins. They had sent me a request to have some changes in it so they can add it to the repository. But i just noticed their message in my inbox here :S So when i have a little stressless moment i will send it to them.

[kerrod]

This is perfect! I was half-way through adapting "Another Image Gallery" for slimbox, but then (thankfully) stumbled across this.

Saves some time for me. Thanks.

Cheers,
- KH

[ktsixit]

Hi there,
I'm trying to use this script but I don't understand what's happening.
I mean I have downloaded the files from the official website. The files are not complete.
jquery.1.3.2.min.js, mousewheel.pack.js and jquery.color.js are missing.
I found and downloaded these files too, managed to make the nyroModal work but there are messages printed on the dark window area, adter the new windows pop-up.

Why is the download package uncompleted and what do I have to do to make this thing work like it should be? Since you have used it successfully, can you help me a little please?

[D72]

Hi Ktsixit,
The download package is not incomplete.
Install the attached gallery as a module, and add the javascipt lines and the style sheet line in the index.php file you are using as yout frontend template.
Change the lines with the path/domain of your website and the script will work fine without any problems.
Matter of fact, i've just tested this gallery on the latest release of WebsiteBaker 2.8.
As you can see, the script is working properly. Just follow all steps in my first topic above. You should have done something incorrectly.

[WebBird]

Why did you include the jquery.min.js? For use with WB 2.7?

[D72]

i have no idea. 
I didn't liked the original lightbox and just downloaden the Modal plugin and placed all lines as the developer advised.
Didn't paid real attention to it if WB was allready using jquery or not.
I do know right now that 2.8 allready has jquery in it's core settings...
So yes, the jquery min could possibily deleted from the above lines.

[WebBird]

You could just include a frontend.js

[D72]

i don't understand.
I don't have many experience and knowledge with WB, so maybe frontend,js is a familiar thing for WB peeps, i've never heard of it before. Sounds interesting though.

[WebBird]

The frontend.js is included automatically if it exists since WB... 2.7, I think. Same for backend.js.

So, you could create a frontend.js which includes the other JS files. This will be loaded automatically, so no template changes are necessary.

Edit: Exists in the module base directory, I should add. There are 4 files that are included automatically if they exist:

* frontend.js
* frontend.css
* backend.js
* backend.css

I think it's clear which files are for what.

With WB 2.8, two more files are included:

* frontend_body.js (at the bottom of the page, after jQuery)
* backend_body.js (same)

[D72]

hmm  ok...
i will figure that out one of these days.
I still have to make some other changes in this gallery so it can be placed in AMASP's repository.
Hopefully i know what to do to add the .js files in the frontend.js

[WebBird]

I deleted a post, 'cause it didn't work. So here's working code

frontend.js

Code:

var url;

/*
    set var 'varname' to value 'text'
*/
function setVar( varname, text )
{
    eval(varname+"=\""+text+"\"");
}   /* end function setVar() */

function include()
{
    document.write('<scr' + 'ipt src="' + url + '/modules/imagegallery/js/jquery.1.3.2.min.js' + '" type="text/javascript"></scr' + 'ipt>');
    document.write('<scr' + 'ipt src="' + url + '/modules/imagegallery/js/jquery.mousewheel.pack.js' + '" type="text/javascript"></scr' + 'ipt>');
    document.write('<scr' + 'ipt src="' + url + '/modules/imagegallery/js/jquery.color.js' + '" type="text/javascript"></scr' + 'ipt>');
    document.write('<scr' + 'ipt src="' + url + '/modules/imagegallery/js/jquery.nyroModal.1.4.2.pack.js' + '" type="text/javascript"></scr' + 'ipt>');
}

view.php

Code:

echo "\n".'<!-- start image gallery -->'."\n";

## add
echo "<script type=\"text/javascript\">\n",
     "setVar( 'url', '", WB_URL,"' );\n",
     "include();\n",
     "</script>\n";

[macsmet]

Hi there,

I like the module but I can't get two gallery's on one page. The second one doesn't show up then.
Is this true? Can someone confirm this?
I have the same problems as mikirax with flash and this module. Adding z-index to the <div> with the Flash file in it didn't help me.

Greetings,

MacSmet