prettyPhoto and RapidAlbum

Andreas Belivanakis

I have to admit I am utterly confused by the prettyPhoto stack and need some serious help. All I want is to create a photo gallery of images using the prettyPhoto stack.

My first question is, how can I use prettyPhoto with RapidAlbum? I'd like to be able to utilize RapidAlbum instead of RapidWeaver's own Photo Album, because I have a lot more control on thumbnail size and placement.

But here are my issues with the prettyPhoto stack:

I have version 3.0.2, but the option to upgrade to 3.0.3 does not show up when I open up a stacks page.

Clicking on "web info" takes me to a page not found error:

http://rwextras.com/prettyphoto/pretty3.html

Upon visiting the prettyPhoto site:

http://rwextras.com/prettyp_s2/tutorial.html

…I find that my prettyPhoto stack version does not look anywhere near what the example on the prettyPhoto page looks like: "Your page will look like the screenshot below".

In any case, I am trying to follow the prettyPhoto Manual on PDF, but I am stuck early on. The instructions read: "Add a rel="prettyPhoto" attribute to any link tag to activate the lightbox".

I understand the rel="prettyPhoto" attribute and all that, but what about this elusive link tag? Where do I find this link tag? Do I create it myself? Where do I put it?

I'd appreciate your help.

Andreas

tsilva

Andreas,
Let's first start by clarifying what you need:
Pretty Photo is included as an optional photo gallery in Rapid Album. Rapid Album is a plugin, not a stack.
Pretty Photo is also available as a stack, separate from Rapid Album.
The stack and plugin cannot work with eachother. It's either a plugin you want or a stacks page.
Which one are you trying to implement?
I have Rapid Album and can assist in that but do not have the stack version of Pretty Photo.

Re: link tag- it is referring to the drop down dialog box when you click on the "link" icon in RW.

Andreas Belivanakis

I have used Henk's BlowUp and XENSE themes. Both feature a way for a prettyPhoto stack to work in conjunction with the Photo Album plugin. It was worked flawlessly for me. All I had to do was follow Henk's instructions.

I am now trying to make this work on a different project, utilizing the Flood 3 theme by Will Woodgate. The setup I've used with Henk's themes does not work with the Flood 3 theme, hence my question.

I wasn't aware RapidAlbum included a prettyPhoto option. Or perhaps I tried it once and it didn't work, so I'd have to try it again. Thanks for the tip.

Now, regarding the link tag, I understand the RapidWeaver workings, but where I am hopelessly stuck on is where exactly to use this link tag. I mean, I have a stacks page, and there is a prettyPhoto stack in it. There is some information on the stack regarding the style (1, 2, 3, etc) and then there is an input box that reads: "Click here to add content".

What do I put in there? Perhaps if I needed to display a single image, I'd place the link to that image in that box, right? But what if I have an entire gallery? The instructions in the Manual are not bad, but where I am stuck is precisely this point: What do I put in that input box to have a gallery displayed with the prettyPhoto lightbox effect?

Andreas Belivanakis

BTW, I just checked RapidAlbum 1.1 (It still says version 1.0 inside). All in all, RapidAlbum is quite useful, but rather hastily put together. For example, version 1.1 of the Slimbox has left the alt tags blank, by default, requiring the user to edit this template manually to correct this flaw. This omission may be present in the other templates as well.

Anyway, I did not see any reference to prettyPhoto in the templates, unless it is there by some other name. From my experience, the only template that is any good, is the Slimbox. Given the lightbox options that are out there, all other templates are rather sub-par, in my opinion.

If there is a way to add prettyPhoto as a template to RapidAlbum, I have no clue, but am all ears.

Andreas Belivanakis

UPDATE: I have located RapidAlbum 1.3 which does include prettyPhoto in the templates, and all is good, except that this version of prettyPhoto is very lightweight (excuse the pun). It does not include all the options in Henk's themes' implementation. For example, there is no automatic slideshow, no thumbnails parade at the bottom of the picture, no easy way to change the lightbox style, and no rollover thumbnail effect.

Anyone knows how to activate these features? As it is, the prettyPhoto template in RapidAlbum is so plain vanilla, it is no different than Slimbox, and not an improvement at all.

tsilva

Andreas,
If you want, you can also implement it via the original source with some HTML and JavaScript.
The documentation looks pretty comprehensive. Looking at the code it appears that the link tag needs to point to the full size image when the thumbnail is triggered. You need to store the image either on your site's server and point to it with a URL, or store it in Resources and point to it there.
Maybe I'll test drive this script myself later in case you need assistance setting it up:

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

msabene

@Andreas Belivanakis,

Please focus on the sample RW project that I sent you by email and let's take it from there. The prettyPhoto stack is quite simple to use and much simpler than implementing it manually, IMHO...

Cheers,
Mauricio
RWExtras.com

tsilva

Adios!

Andreas Belivanakis

Thank you all for your response. That's a lot of information to swallow, but I'll try.

Mauricio, I tried the sample project you sent me. I believe I am pretty good at following directions, but in this case, I must have a mental block or something. I opened the project up, and there is just one stacks page in it with a single thumbnail and 4 pictures. I am not sure what to do with it. I can see the pictures, but no lightbox effect.

The instructions on the page say:

"Here's a live example, just click on the thumbnail…"

I do not see how this qualifies as a live example. I take it the thumbnail is the one with the highway sign. I clicked on it. Nothing happens. It does not appear to be a link.

Or perhaps I have misunderstood you. Am I supposed to *make* this a link myself? If this is the case, I am not sure how to do it. I know how to use RapidWeaver's "Add Link" feature, for heaven's sake, but that's the step I am stuck on. I am not sure what to make a link out of, and fail to understand what to link that object to.

In any case, by looking at the stacks in Edit mode, it says something about 2 complementary stacks, prettyP Photo gallery and PrettyP Any Gallery, which I do not believe I have. I am confused. Are these stacks necessary, or have they been incorporated into prettyPhoto 3 and are therefore obsolete?

BTW, I have managed to locate prettyPhoto 3.0.3 and installed it. It has not made any difference, but it's now installed, if that helps. Please advise.

msabene

I am not sure but I would take a deep breath and start over. You are making it too complicated when it's very simple. Just follow the 3 steps in the sample RW project.

Just open the sample file, it's ready to go. Nothing to do on your end.

Lightboxes are triggered by links. In this case, just click on the thumbnail (highway sign) and you'll get the lightbox... It will look like the attached screenshot. Of course, you must be online to use any dynamic stack.

Cheers,
Mauricio

Andreas Belivanakis

Do you mean that the project must be published?

I am online, but clicking on the thumbnail results in... nothing at all! It is not a link, so I'd not expect it to do anything. What am I missing?

msabene

Absolutely, you are missing something and there's no need to publish. The thumbnail IS a link created automatically...

Of course I have to assume that you have installed the prettyPhoto stack AND the 2 complementary stacks and that you restarted RW. Correct?

The project works on my end. I'll need details about your setup: version of RW, version of Stacks, theme, etc. to see what's going on on your Mac...

Cheers,
Mauricio

Andreas Belivanakis

OK, the 2 complementary stacks were not installed. They appeared on the page, and that threw me off, as I thought they were installed automatically together with prettyPhoto 3.0.3, but that was not the case. After I installed them, the sample project worked as expected. Thanks!

Andreas Belivanakis

Now, back to my original question, can prettyPhoto be made to work with RapidAlbum, or some other kind of image gallery plugin? And I do not mean the existing RapidAlbum implementation, where prettyPhoto is no different than Slimbox.

See, even though I can imagine a situation where someone would want an image gallery to spring up just by clicking on a single image, that's not generally considered good interface design. There is even a name for it: "Mystery Meat", and it's derived from the fact the end user has no idea what he/she will end up seeing, until *after* he/she has clicked on the image link.

A more acceptable interface would be something like Photo Album, or better yet, RapidAlbum, where the entire gallery is seen, in the form of thumbnails. The end user can then choose to click on *any* one of the thumbnails to start the lightbox.

Again, however, a plain vanilla lightbox that's no different from Slimbox is of little use. At the very least, I want Henk's implementation in BlowUp and XENSE themes, namely:

Rollover hover effect on the thumbnails, even a simple one. RapidAlbum has none.

A thumbnails parade (carousel) at the bottom of the window, with the option to be dismissed automatically or manually. RapidAlbum does not offer this feature.

This one is *extremely* important! It provides the user with random access to the images. If this feature is not present, the end user can only go sequentially from slide to slide. Think about it. We've left the era of cassette tapes behind us, in favor of CDs (sequential vs. random access). Why stick with a sequential technology for image viewing? A plain vanilla lightbox is the cassette tape of the slide shows.

Automatic slideshow (autostart on/off) with selectable transition speed between frames. RapidAlbum has nothing like that.

Several options for a cool interface (buttons, frame, colors, choices for the shape, icon and position of the "close" button, etc.)

I have seen a prettyPhoto-based lightbox presentation by NCD themes, where there is even a Facebook "like" button incorporated in each photo's description! I am sure there are other features as well, that can be implemented by astute developers. Why can't we have something as cool as that? Enough with the plain vanilla versions, please.

Henk created a prettyPhoto-based photo gallery in conjunction with Photo Album, which in itself is a dinosaur of photo albums. Henk's implementation, however, with the addition of prettyPhoto and some custom jQuery code is prettyCool (no pun intended). An example of such a Photo Gallery can be seen in one of my websites here:

http://www.dionysismilos.com/photogallery/

msabene

At this point, I am not sure I understand exactly what you are asking...

First, did the sample RW project that I sent work after you installed the 2 complementary stacks?

The stack will not work with RapidAlbum but, as you already know, it works with Photo Album pages following the instructions on Henk's website (which by the way, I provided to Henk...)

The prettyPhoto stack that you have includes all the latest features implemented by the developer except the social media icons which created problems and therefore, I decided to leave them out. However, it includes a few extras such as the ability to play mp4, m4v, and flv videos which is not available in the original implementation.

If you want to update RapidAlbum to include the latest version of prettyPhoto you'll have to contact the developer. I can't help you with that.

Cheers,
Mauricio

Andreas Belivanakis

Yes, Mauricio,

After I installed them, the sample project worked as expected. Thanks!

Andreas Belivanakis

At this point, I am not sure I understand exactly what you are asking...

Can prettyPhoto be made to work with RapidAlbum?

This is the simplest way I can ask the question.

Mauricio, you wrote that you provided the instructions to Henk, for Photo Album to work with prettyPhoto. That's great, but just to be sure, I am not talking about Henk's own website. I am referring to Henk's BlowUp and XENSE themes, that utilize prettyPhoto in conjunction with the Photo Album plugin.

I have used the BlowUp and XENSE themes to built websites, but now I want a similar solution with other themes. Specifically, I am working with Flood 3.2 by Will Woodgate, and Henk's implementation does not work with the Flood theme.

Would it be possible for you to provide a similar set of instructions for prettyPhoto to work with the Flood 3.2 theme and Photo Album?

Better yet, could you provide a similar set of instructions for prettyPhoto to work with the Flood 3.2 theme and RapidAlbum?

In my long message earlier, I made the case that RapidAlbum is preferable to Photo Album. Was that not clear?

msabene

My confusion was regarding what you might need from me. I provided the prettyPhoto stack therefore, I provide support. Any other questions regarding RapidAlbum, Flood, etc. must be asked to the respective developers...

The prettyPhoto stack will NOT work with RapidAlbum and will NOT work with Flood:

1) RapidAlbum is a plugin that includes its own version of prettyPhoto. Nothing to do with Stacks therefore, I can't provide any instructions because I have no idea how RapidAlbum works internally.

2) If a theme has prettyPhoto built into it, as with Flood, you don't need the prettyPhoto stack and if you use it, it will not work because there would be a conflict between the 2 versions. I suggest checking with Will (ThemeFlood) to see if he has some pointers for you about how to apply the built in version of prettyPhoto to the Photo Album page in Flood. If you could deactivate the built-in version then, that would be enough. However, I don't see that option...

Cheers,
Mauricio

Andreas Belivanakis

Thanks, Mauricio, that answers my questions. I will check with Will to see what we can do.

msabene

I was just checking and it appears that Flood does not include a built-in version of prettyPhoto...

Mauricio

Andreas Belivanakis

Yes, I was checking last night, too, and could not find a built-in version of prettyPhoto in Flood 3.2. This is not necessarily bad, however.

The prettyPhoto setup in the sample project you sent me works fine, but like I said, it's not quite what I am looking for. The main reason is that it gets triggered by a single link, image or text. I'd much rather have an entire image gallery's thumbnails available, for the end user to click on any thumbnail he/she wishes in order to invoke the prettyPhoto lightbox. Is this something that's possible, for the Flood theme or any other theme?

msabene

Of course it's possible and has nothing to do with the theme...

Unless I am misunderstanding, while we've been talking about "galleries," I don't think that you need to set up a gallery. A gallery means that a SINGLE thumbnail triggers the whole series of images.

In your case, just set up all the thumbnails and add links to each of them pointing to the full-size image (using Add Link). With this, each thumbnail triggers prettyPhoto separately. You can either use the 2 complement stacks (i.e. a "gallery" of 1 image/item) or you can do it manually following the tutorial on my website. Of course, you only need prettyPhoto on the page ONCE.

I hope this helps...

Cheers,
Mauricio

Andreas Belivanakis

Hi Mauricio,

You wrote:

I don't think that you need to set up a gallery.

The thing is, I *want* to set up a gallery. I do not want the prettyPhoto set of images to be triggered by a single image or text link. I want it to be triggered by *any* *one* of a set of images (thumbnails).

Of course, I want it to be setup easily, in a non-tedious manner. I do not want to have to create the thumbnails myself; they should be created automatically. And I do not want to have to create links for each one of the thumbnails; they have to be automatically generated, if possible.

This does not have to be accomplished by a complementary stack, necessarily. It can be done with warehoused images. Henk's implementation utilized warehoused images and a javascript snippet, but later on he introduced the hvslider stack to make things easier.

All in all, I want the same effect, as shown on this example page:

http://www.dionysismilos.com/photogallery/

We do not need to reinvent the wheel. This has already been done. But it only works, it seems, for the BlowUp and XENSE themes. Why can't I have the same solution work on all other RapidWeaver themes?

Is this too much to ask? I do not believe so.

msabene

"Is it too much to ask?" Actually, yes, because not all RW themes are created equal. Every developer does things somewhat differently...

All stacks developers do their best to prevent conflicts however, it's impossible to guarantee 100% compatibility. There are just too many variables involved.

In this case, I provide an implementation of prettyPhoto for Stacks with features described on my website and, as far as I know, has been used successfully in many projects.

Will the setup of your specific project be tedious? It all depends on what you want to do and your skill level.

If the prettyPhoto stack doesn't meet your needs, I'll be more than happy to issue a refund so that you can find a solution that works better for you.

Cheers,
Mauricio

Andreas Belivanakis

I have explained what I am trying to do, and even provided a sample page. It has been proven that prettyPhoto can do what I want to do, at least with the BLOWUP and XENSE themes. All we need to do now, is discover whether this can be done with other themes as well.

Can it be done? We won't know unless we try. Unless I misunderstood, first you categorically stated it won't work with the Flood theme, but you later retracted that statement.

I know that the exact same setup won't work with the Flood theme. Perhaps a modified version of the jQuery code will work. I really do not know. I am asking you.

msabene

When we first thought that Flood had a built in version of prettyPhoto, I said that it wouldn't work. That stands for any other theme that includes built-in versions of prettyPhoto. Later, I realized that Flood doesn't include prettyPhoto therefore, it should work but, unfortunately, we tried and it didn't work and that's why I suggested asking Will. He knows his theme better than anybody and he might be able to find a solution quicker.

The solution presented in Henk's site works in many themes that I've tested however, keep in mind that it's "adapting" the Photo Album page to do something that it wasn't designed to do and, because of that, you can't guarantee that it will work in every case...

Cheers,
Mauricio

msabene

I think I know why it's not working in Flood. I'll get in touch with Will to discuss it...

Andreas Belivanakis

Thanks. I have also sent a message to Will regarding this issue.

msabene

I have a solution but would like Will to confirm that it's the best/simplest solution available...

Andreas Belivanakis

I can try it, as I have been testing a project for a few days. I am not ready to publish it yet, but can try it within RapidWeaver and by previewing in browsers locally.

msabene

I'll email you the details.

Mauricio