Photo gallery intergration with web app

[SALtvMPdz]

I want to create a web app where If I create a new item, that automaticly will create a new photo gallery. Also this photo gallery will be automaticly linked in a field with the photo gallery code. Is this possible? Yes, How can I achieve this?

[Liam Dilley · Accepted solution]

You can not do it automatically no.

For the gallery module a folder needs to be made and pictures added into that folder.

You then need to add the module for that gallery into a web app.

This is all manual.

You would have to make 20 custom fields to upload images as part of a web app to create a gallery element.

[topelovely]

Hi Liam. I'm interested in your approach. The approach I have integrated is to to set up the photo gallery Then in the description field of the web app, insert the photo gallery module for the web app item.

But in a case I want users to upload the images and on viewing the images also appear as thumbnails and click an image the overlay effect as the photo gallery in BC takes effect. How can I go about it?

Regards.

[Liam Dilley]

Hey,

If your looking to build a web app gallery there is a few approaches.

I would suggest making a web app called gallery. Each web app item is a gallery item.

Your custom fields would be an image field and then maybe use a text field for a short description rather then using the editor area to force them to be short.

{tag_YOURTAG_value} is key and you do not need a big or small image, just one and you can implement the thumbnail generation as outlined here:

http://forums.adobe.com/docs/DOC-2145

Then you need to layout your web app as you want, maybe each item is an li and the module is on a page wrapped in the ul you need.

For the lightbox you can use many jQuery ones out there for example, I am a fan of prettyphoto myself due to the options it has to use.

Hope this helps

[topelovely]

Thanks Liam for the help. I have done all that you have advised now. I'm having challenges connecting the prettyphoto jquery plugin to the tags. Please see below how my list view is setup

Am I right like this:

<ul>

    <li>

< a href ="{tag_custom image 1_value}" rel="prettyPhoto[my web app gallery name]" ><img alt="" src="{tag_custom image 1_value}?Action=thumbnail&Width=200&Height=200&algorithm=fill_proportional" /></a></li>

</ul>

Thanks

Regards.

[topelovely]

This is how it looks now yet the pop doesn't come up

<ul>

    <li><a href="{tag_custom image 1_value}" rel="prettyPhoto[pp_gallery]"><img alt="" src="{tag_custom image 1_value}?Action=thumbnail&Width=200&Height=200&algorithm=fill_proportional" /></a></li>

</ul>

Since I use Muse, I introduced require.js and created a main.js page so that I can control the order of jquery. This is how the head section of my page looks like:

<script data-main="scripts/main.js" src="scripts/require-jquery.js"></script>

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />

I have the prettyPhoto folder on the server. When I click the image it loads the bigger version in a new page

[topelovely]

Hi Liam, thank for your pointer to prettyphoto. I have been able to integrate it and it is working. But the challenge I have is that it works only in the List view and not in the detail view. I actually want it in the detail view, but it is not working. This is the url of the page so you can see it. I maybe missing something i guess.

http://pevronestate.vivovecompany.com/residential#prettyPhoto

[Liam Dilley]

Hey, I take it this was built in Muse considering the sherr gianmous amount of inline CSS and Scripts? Really hard to find the issues, lol.

You have two errors, one is that prettyPhoto is not a function and that is a result of this:

Timestamp: 5/05/13 8:57:06 PM

Error: Error: Load timeout for modules: main

http://requirejs.org/docs/errors.html#timeout

Source File: http://pevronestate.vivovecompany.com/scripts/require-jquery.js

Line: 159

It is a common error luckily and I believe its only here:

<script data-main="scripts/main.js" src="scripts/require-jquery.js"></script>

When you reference BC scripts etc you need to tell BC to read from the root so when you go into things like a detail view of a web app which is a folder level down from the root where to find the code.

Any script, image, css call etc needs to have a / in front of it.

So ...

scripts/require-jquery.js

Would be...

/scripts/require-jquery.js

And so on.

Hope that helps.

[topelovely]

Thanks so much for your pointers and assistance. I have been able to make it work by following your advice. I just ammended the detail view with this

<link charset="utf-8" title="prettyPhoto main stylesheet" media="screen" type="text/css" href="/css/prettyPhoto.css" rel="stylesheet" />

<script data-main="/scripts/main.js" src="/scripts/require-jquery.js"></script>

Now it is working fine.

Thanks so much, I appreciate it.

Regards.

[Liam Dilley]

Awesome, glad I could help.