Using Shadow box gallery with mutiple file type

I have been searching for something like Shadowbox for a couple of days now. I tried rokbox (didn't work that well- code is much easier to learn though), and also Jp medialight (good, but didn't have the thumbnail)

So I gave Shadowbox a shot and after reading the PDF and also experimenting, I was able to create a Gallery with multiple external sites. Here is a example:

Note, you will need to locate your template_css.css file to create a new class "hidden"

At the bottom, or where ever you desire to place the code, copy and paste this here

.hidden { 

display:none; 

}

Then use this example
<p> </p>

<p><a href="http://www.google.com" Title="GOOGLE" rel="shadowbox[search];width=905;height=640"><img alt="Google" src="images/thumbnail/google.png"></a>

<a class="hidden" href="http://www.msn.com" Title="MSN" class="hidden" rel="shadowbox[search];width=905;height=640"><img alt="MSN" src="images/thumbnail/msn.png"></a>

<a class="hidden" href="http://www.yahoo.com" Title="Yahoo" class="hidden" rel="shadowbox[search];width=905;height=640"><img alt="Yahoo" src="images/thumbnail/yhoo.png"></a></p>

With this code I have done several things;
include class "hidden" for yahoo and msn, so you don't see the thumbnail.
I also set a specific width and height.
I also put them in the same gallery, "search"
Yes, I know that the name was double, Title and Alt, but one is for the thumbnail and the other one is for the shadowbox.

Hope this help.

31 Jul 08

Hi barton91,

Interesting solution you have there. Thanks heaps for sharing your method.

A problem I see for bigger galleries is having to load all the thumbnails.

If you have a minute, please try not using thumbnails for all but the first one, like so:

<a class="hidden" href="http://www.msn.com" Title="MSN" class="hidden" rel="shadowbox[search];width=905;height=640">MSN thumbnail</a>

31 Jul 08

I understand. It wouldn't make any sense to create a path to an image, when it is not going to show anyways. Thanks for the advice. As I said, I am new configurating shadowbox and wanted to help others after me.

31 Jul 08

And I'm very thankful for that help :)

Just a few threads away from this one is a request for a feature similar to the solution you described here (User links to a directory and every pic in that directory can be browsed through in the shadowbox)

Thanks to your contribution here, that member may have solved his problem :)

31 Jul 08

Just to chime in here,

thanks for the info barton,

as for having the directory and shadowbox browsing through it, still doesnt appear possible, the only thing he would gain from this is that it would "appear" to be one image that then flicks through as a gallery.

he will still have to manually enter every image, whether it is hidden or otherwise.

the only real way i can think of doing this would be to create a script/module/component that automaticly searched a specific directory, and have it display the links as shadowbox links. imo it wont be possible to have shadowbox do this by itself.

sort of like a mini gallery

however i am welcome to being proved wrong

01 Aug 08

Great contribution, thanks Barton!

25 Mar 10

hey all,
Love the Shadowbox! I am implementing a Linked Image Gallery and everything works great except my links are not being hidden.

I am using the ja_purity template and went as far as placing the '.hidden { display:none; }' in the "template.css" file.

I do not have a "template_css.css" file as mentioned above.

Any ideas as to get these links to hide?

many thanks in advance!

~ Grendel_blitz

\m/

25 Mar 10

Hi Grendel_blitz,

Thanks for the kind words.

Please post a link to your website.

Thanks
Mark

25 Mar 10

http://www.wooden-nickel.com/nickels2/index.php?option=com_content&view=article&id=50&Itemid=59

Thanks Mark!

\m/

25 Mar 10

{sorry for the double post - did not see the page continuation}

Thanks for looking Mark!

http://www.wooden-nickel.com/nickels2/index.php?option=com_content&view=article&id=50&Itemid=59

~ Grendel_Blitz

\m/

25 Mar 10

The CSS you mentioned you added to template.css does not exist. Adding it should fix the issue.

http://www.wooden-nickel.com/nickels2/templates/ja_purity/css/template.css

25 Mar 10

Hey Mark,
Thanks for checking into this.

I actually did add the CSS before but for some reason, it did not take. I changed the file permissions on the style sheet the second time around and it worked (so maybe that is why - ???).

Thanks so much for the assistance!

All the best to you!

~ Grendel_Blitz

\m/

25 Mar 10

I figured that was the case. Glad to help. :)