Multiple Galleries. Maybe a bug?

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

Multiple Galleries. Maybe a bug?

Miguel
Hello,

I have the following JS which is working fine:

  $('a.Gallery').shadowbox({
    continuous: true,
    counterType: "skip",
    gallery: "Gallery",
    height: 450,
    width: 600,
    player: 'img'
  });

And the Html is:
< a href="/House/GetImage(annex))" class="Gallery">Show< /a>

On this page I have multiple galleries so I changed my anchors to become:
< a href="/House/GetImage(annex))" class="Gallery" rel="shadowbox[1]">>Show< /a>

When I added the rel every time I click on show I get a huge window (not 450px by 600px) with the image inside. If I remove the rel then the window containing the image has the correct size.

What is wrong?

Thank You,
Miguel
Reply | Threaded
Open this post in threaded view
|

Re: Multiple Galleries. Maybe a bug?

manfer
This post was updated on .
With the call to .shadowbox you are just setting those links as shadowbox links and you are setting there a shadowbox gallery attribute, with value "Gallery". After that in rel you are again setting a gallery attribute, with value 1. Anyway no matter if you set in rel that gallery attribute to "Gallery" (rel="shadowbox['Gallery']"), you will override all options you are setting in the call to .shadowbox.

So, you don't need the rel at all. If what you want is to open all images with size 600x450, your code is correct without the rel attribute. If you what each image opened at its size, remove the height and width attributes in .shadowbox call.

Of course as you are setting gallery with value "Gallery" to all links, this is only one gallery.

----------------

But I suppose what you really need is multiple galleries and that's why you are trying to find how to share various parameters for all those galleries. And I think that is something you need to do with Shadowbox.init. What is the problem with this, I think only the options can be set with init and be shared by all galleries. That means you can share continuous and counterType but you can't width and height. And in that uncommon situation where it seems you want a specific dimension for your images (you want the images resized if they don't have that dimension) you would need to set it in all links.

So it would look something like this. In head:
<pre>
    Shadowbox.init({
      continuous: true,
      counterType: "skip"
   });
</pre>

And in body:
<pre>
<a href="photo1.jpg" rel="shadowbox[1]; width=650; height=500;">1 on gallery 1</a>
<a href="photo2.jpg" rel="shadowbox[1]; width=650; height=500;">2 on gallery 1</a>
<a href="photo3.jpg" rel="shadowbox[2]; width=650; height=500;">1 on gallery 2</a>
<a href="photo4.jpg" rel="shadowbox[2]; width=650; height=500;">2 on gallery 2</a>
</pre>

Or maybe you can try to do it with jquery. You set a class to all links like in your example. So:
<pre>
<a href="photo1.jpg" class="Gallery" rel="shadowbox[1]">1 on gallery 1</a>
<a href="photo2.jpg" class="Gallery" rel="shadowbox[1]">2 on gallery 1</a>
<a href="photo3.jpg" class="Gallery" rel="shadowbox[2]">1 on gallery 2</a>
<a href="photo4.jpg" class="Gallery" rel="shadowbox[2]">2 on gallery 2</a>
<script type="text/javascript"> $("a.Gallery").each(function(index, elem) { var relAttrib = $(elem).attr("rel"); relAttrib += '; width=650; height=500;'; $(elem).attr("rel", relAttrib); }); </script></pre>

Maybe even you could use Shadowbox.setup to configure the shared options (continuous and counterType in your case) instead of Shadowbox.init. This way you could do it only on the links with class "Gallery" so the page could even have more shadowbox links with totally different option values if needed.

It is all a little confusing because in shadowbox API functions, in init or setup you can only configure options but not other members of the object like width, height, gallery, title and content. Those, the members of the object, are only set on a per link basics, with API function open or with inline rel, href and title attributes of an anchor.

But .shadowbox jquery notation is different, it let's you configure both options and members, but it is so because you are doing it on a per link basics. When you apply .shadowbox to $('a.Gallery') you are applying it to all anchors with class "Gallery". Maybe, this point would be less confusing if .shadowbox syntax were just the same as for open API function (though .shadowbox is only configuring not triggering an open):

<pre>
// .shadowbox({ this line maybe confuses you, need some kind of jsquery selector of course
$('a.Gallery').shadowbox({
  width: 650,
  height: 500,
  options: {
    continuous: true,
    counterType: "skip"
  }
});
</pre>

but it isn't so.
-------

Hope this makes sense for you.
Reply | Threaded
Open this post in threaded view
|

Re: Multiple Galleries. Maybe a bug?

Miguel
Hello,

I wasn't able to make this work.

I wanted multiple galleries and if possible using JQuery.

I tried your code but didn't work.

Could you, please, give me a more concrete example?

Thank You,
Miguel
Reply | Threaded
Open this post in threaded view
|

Re: Multiple Galleries. Maybe a bug?

manfer
I edited the last lines of code of the previous post, maybe that way makes more sense to you.

The lines of code on top of previous message and lines on botton are not part of a working example. It is only code to explain concepts.

What I explain there is that if you want to open all your images in an specific  dimension you have to configure those dimension for each link. If the images can be opened in its own dimension you don't need to specify them.

An I show you the way to specify those dimensions with shadowbox base, and with shadowbox jquery notation.

Reply | Threaded
Open this post in threaded view
|

Re: Multiple Galleries. Maybe a bug?

dataload
In reply to this post by Miguel
Sounds like your inline rel attribute is overriding the options you specified above and your image is opening with the iframe player instead of the image player (since your href doesn't have a recognisable image extension like .jpg, .gif, etc.).  Try specifying this player in your inline rel attribute and see what happens.

That should solve the issue with the image appearing in a big shadowbox, as for the rest of it I'd ditch the JQuery (why are you trying to do it with JQuery anyway?). Set your counterType and continuous in shadowbox.init and specify the gallery name and player in the rel attribute.  I'd get rid of the height and width altogether (unless you're specifically using them to open the image at a different size to it's native one).