Shadowbox in Galleriffic

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Shadowbox in Galleriffic

QuickPaw
I'm trying to get shadowbox to work within Galleriffic. I've gotten it to the point where the first item that is selected on the page will work just fine, however, any other selection will result in the image opening up normally without shadowbox.

Here is the URL below with my test page:
http://sgwmcguggan.digitechsgw.com/Portfolio/Print.aspx

If you select the "Zoom Image" text on the right when you first arrive on the page, shadowbox will work. If then, you select any of the thumbnails from the left, shadowbox will stop working when you click the "Zoom Image".

Any ideas? I've seen people with similar issues before.
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox in Galleriffic

manfer
Your flow now:

- You load on head any necesary libraries.
- You configure shadowbox with setup after the DOM is ready. (This is what makes you first popup class "zoom image +" link works).
- You click on a thumb that dynamically changes the galleriffic image. So this dynamic one with his own "zoom image +" link is not configured for shadowbox. And this is why it is not working.

I don't know how to explain it better.

What you would need to do is one of two things:

- Your "Zoom image" links that opens the shadowbox are not links to images but to a javascript that opens shadowbox with Shadowbox.open API function. Something like:

<pre>
<script type="text/javacript"> function openBox(image, title) { Shadowbox.open({ content: image, player: "img", title: title, options: { autoplayMovies: true } }); } </script></pre>
<pre>
<a href="javascript:openBox('/getattachment/1382ec79-0b46-4a15-b9f4-ca8e8bcd87ef/Redwood-Press.jpg', 'Redwood Press');">Zoom Image +</a>
</pre>


Or...

- You configure galleriffic in a way every time you click a thumbnail you execute again Shadowbox.setup to configure the new "Zoom image" link. I think this should work too though not sure.
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox in Galleriffic

QuickPaw
I'm just reading your post now after I added the following to the anchors:

onclick="Shadowbox.open(this, {type:'img', gallery:'gallery', displayCounter:'true', counterType:'skip', continuous:'true', title:'Redwood Press', content:'/getattachment/cdef7c0d-b0e9-4d64-91cd-95c894553d23/Redwood-Press.jpg'}); return false;"

This seems to work for the time being. Good thing I have this all in a repeater! If I end up running into a snag, I'll try out your suggestion. Thank a bunch for checking this out for me!
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox in Galleriffic

manfer
This post was updated on .
Yes your solution looks good, using the onclick event.

The idea was to use shadowbox.open. That's what solves your issue.

When it was failing were because shadowbox adds that similar onclick even to rel=shadowbox anchors on init or when you call setup on specific anchors. And as I tried to explain on those dynamic layers that gallerific is creating when you hit a thumbnail (at least it is what I think it is doing) the onclick event was not being added. So your solutions were: just adding the onclick event yourself like you are doing (better than my old javascript in href :) ) or calling setup on every thumbnail click.

Anyway I think you don't have correct syntax on open function. Doesn't it have to be this way?:

onclick="Shadowbox.open({player:'img', gallery:'gallery', options:{displayCounter:'true', counterType:'skip', continuous:'true'}, title:'Redwood Press', content:'/getattachment/cdef7c0d-b0e9-4d64-91cd-95c894553d23/Redwood-Press.jpg'}); return false;"
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox in Galleriffic

QuickPaw
You are probably right on both accounts, lol. I'm not going to question why it works this way.

I figured that gallery javascript was cancelling out what shadowbox was trying to do, I just didn't know how to get around that. But, it works for the time being, so I'll stick with this way until I clean up the code some more. Again, thanks a bunch!