Colorbox woes [SOLVED]

14 Posts

clunch Reply #1, 16 years, 9 months ago

Hello Everybody!

I’ve been trying to integrate colorbox into MaxiGallery and having some interesting success.. in the pyrrhic victory sense. Using the thickbox/jQuery integration how-to in the wiki, I created the template as instructed, but changed the class to colorbox like so:

<li>
    <a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" class="thickbox" rel="gallery">
        <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.picture.title:htmlent+]
        [+maxigallery.strings.click_to_zoom+]" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
    </a>
    [+maxigallery.picture.title:isnot=``:then=`
        <p style="width: [+maxigallery.picture_width_thumb+]px;">
            [+maxigallery.picture.title:htmlent+]
        </p>
    `+]
</li>

Called the colorbox js in the document head, used this MG call:

[!MaxiGallery? &galleryPictureTpl=`colorboxGalleryPictureTpl` &order_by=`pos` &max_thumb_size=`350x350` &max_pic_size=`600x800` &max_big_size=`600x800` &limit=`2` &thumb_use_dropshadow=`1` &thumb_shadow_bgcolor=`c05719`!]

And it works. EXCEPT.. when you click on the image to see the big version, the modal window that pops up is extremely huge. Like 1200 pixels wide, and the image is stuck on the left side of said window. The prev/next img buttons do show up and work, however.
I’ve tried isolating MG to a page without any other stuff to potentially interact with it, to no effect. I’m not sure if this is a MaxiGallery (template?) thing I can change or if its some oddity of colorbox that I don’t yet understand.

Any insight would be greatly appreciated

Thanks!

4,213 Posts

doze Reply #2, 16 years, 9 months ago

Is the page online? It would be much faster to figure out what your problem is by seeing the actual page.

Colorbox uses mainly CSS to create it’s visual outlook, so it’s a good chance that something in your site / maxigallery / other css is messing it up.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

14 Posts

clunch Reply #3, 16 years, 9 months ago

Yowza! Thanks for the input, doze.

Your mention of the CSS files put me looking in that direction, but I ended up stumbling instead onto the fact that QM+ uses colorbox and viewing the source of the page in question made me realize that the weird behavior I’ve been seeing was in fact coming from the QM+ colorbox declarations....because the call I used in my MaxiGallery template didn’t have anything to interface with in my colorbox snippet. Thusly, I changed the class in the template to "maxicolor" and wrote

$(".maxicolor").colorbox({transition:"fade"});

into my colorbox snippet and now it works--with QM+ enabled and everything (though they do still seem to be fighting each other with some of the CSS, which I’ll be looking at next). Yayhooray!

14 Posts

clunch Reply #4, 16 years, 9 months ago

Ah..shoot.

So, my solution works, but now I’m trying to regain the functionality I had before, using the One thumbnail in page, but all pics in Slimbox/Lightbox tutorial in the MG wiki. I’ve set up my two templates thusly:
mgGalPicTpl:

<li>
<a class="maxicolor" href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
title="[+maxigallery.picture.title:htmlent+]
[+maxigallery.picture.descr:htmlent+]">
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]"
class="thumbnail" title="[+maxigallery.picture.title:htmlent+]
[+maxigallery.strings.click_to_zoom+]"
alt="[+maxigallery.picture.title:htmlent+]
[+maxigallery.strings.click_to_zoom+]" />
</a>
</li>

mgGalPicTplHidden:

<li>
<a class="maxicolor" style="display:none;"
href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
title="[+maxigallery.picture.title:htmlent+] -
[+maxigallery.picture.descr:htmlent+]"> </a>
</li>

With this in my colorbox snippet:

$(".maxicolor").colorbox({transition:"fade"});

and these two MG calls:

[!MaxiGallery? &display=`embedded` &order_by=`pos` &limit=`1` &max_thumb_size=`350x350` &max_pic_size=`600x800` &max_big_size=`600x800` &thumb_use_dropshadow=`1` &thumb_shadow_bgcolor=`c05719` &galleryPictureTpl=`mgGalPicTpl`!]

[!MaxiGallery? &display=`embedded` &order_by=`pos` &limit=`99999` &max_pic_size=`600x800` &max_big_size=`600x800` &galleryPictureTpl=`mgGalPicTplHidden` &manageOuterTpl=`@CODE:` &manageButtonTpl=`@CODE:`!]

I replaced the rel=lightbox[maxigallery directory code] bit with class=maxicolor (as noted in the colorbox snippet), since colorbox doesn’t appear to support being called in that way (i.e. rel=colorbox[blahblah])

So..it doesn’t really work. If you click on the thumbnail image, it pops up the modal window with larger pic, but doesn’t get any further than that--the prev/next buttons don’t show up. If I set &limit=`3` on the first MG call, when an image is clicked the gallery functionality does work (but obviously it displays 3 thumbs) which says to me that there is some problem between the two MG calls or templates. OH, one more thing. In IE8, I get an error message (the non-fatal variety):

Message: ’Fx’ is undefined
Line: 12
Char: 1
Code: 0
assets/snippets/maxigallery/slimbox/js/slimbox_lang_en.js

Message: Object doesn’t support this property or method
Line: 244
Char: 1
Code: 0
assets/snippets/maxigallery/slimbox/js/slimbox.js

But I thought I wasn’t using slimbox? huh?

As always, any insight would be appreciated

IF posting a link to the site would be helpful, I can do that, though I’d rather PM it, as the site is of the e-commerce variety and not overly secure at the moment

Thanks!

14 Posts

clunch Reply #5, 16 years, 9 months ago

Been having a great conversation with myself here, thought I’d tell you (me) what I ended up doing to fix the problem.

So, step 1 was to write a function call in the colorbox snippet so that colorbox is looking for a specific class when you make your MG link:

$(".maxicolor").colorbox({transition:"fade"});

with the "maxicolor" being the class you’re defining for the MG link
Now, I wanted to use the single thumbnail + full gallery on click thing from the MG wiki, so I took the template chunks from there:
mgGalPicTpl:

<li>
<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
rel="lightbox[set[+maxigallery.picture.gal_id+]]"
title="[+maxigallery.picture.title:htmlent+]
[+maxigallery.picture.descr:htmlent+]">
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]"
class="thumbnail" title="[+maxigallery.picture.title:htmlent+]
[+maxigallery.strings.click_to_zoom+]"
alt="[+maxigallery.picture.title:htmlent+]
[+maxigallery.strings.click_to_zoom+]" />
</a>
</li>

HOWEVER, I changed the link part of it to look like this:

<a class="maxicolor" href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="gallery" with the rest of the code being the same

I then changed mgGalPicTplHidden:

<li>
<a style="display:none;"
href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]"
rel="lightbox[set[+maxigallery.picture.gal_id+]]"
title="[+maxigallery.picture.title:htmlent+] -
[+maxigallery.picture.descr:htmlent+]"> </a>
</li>

adding class="maxicolor" and changing the rel="lightbox[set[+maxigallery.picture.gal_id+]]" to rel="gallery"

To actually call MG, I use the calls in the wiki, but slightly modified:

[!MaxiGallery? &order_by=`pos` &limit=`1` &galleryPictureTpl=`mgGalPicTpl`!]

[!MaxiGallery? &order_by=`pos` &limit=`99999` &galleryPictureTpl=`mgGalPicTplHidden` &manageOuterTpl=`@CODE:` &manageButtonTpl=`@CODE:`!]

And that’s it! I also noticed that it seems unnecessary to set the style="display:none;" on the hidden template, as that template just makes a link with a blank   in it, which isn’t visible anyway. But whatever float yer boat, I guess.

I realize that this is pretty simple stuff, but it took me a while to get it to behave properly, so I thought ’hey, maybe somebody else is having as much trouble with this as me’ and here it is

One thing of note, which I haven’t quite nailed down yet: As it stands right now, when you click on the thumbnail and open the gallery, it displays the first picture twice. I’m not quite sure what the deal is there, maybe somebody else can provide some insight? Add &offset=`1` to the second MG call and this problem evaporates

4,213 Posts

doze Reply #6, 16 years, 9 months ago

Yep, good that you got it resolved. I guess you know by now what your problems were, but here’s some observations:

1. The slimbox error was coming, because you used &display=`embedded` parameter in your first snippet calls. That parameter goes with &embedtype what is used to tell which javascript from the integrated ones you’d like to use. It’s default value is slimbox, so that’s why MaxiGallery was including slimbox javascript files to the templates. It should have worked just by removing the &display parameter from your first snippet calls, or defining &embedtype to be something of your own, then you could have used that in your custom MaxiGallery templates.

2. The picture set was not working for you at first, because you removed the rel attribute from the links. That attribute is used to collect certain links to their own sets and make the "slideshows" with prev/next links. By defining it as rel="gallery" in your templates, colorbox collects all the pictures now to the same sets. You might want to change this to rel="gallery[+maxigallery.picture.gal_id+]" if you have pages where there are several galleries on the same page and you’d like to have own picture sets for each gallery. Or you could make use rel="gallery[+maxigallery.config.embedtype+]" and then you could use the &embedtype parameter in your snippet call to define that the pictures from that call should be in their own colorbox picture set.

3. The core issue that you first had is indeed because QM+ was running on the document and it had already initialized colorbox with it’s settings. The way you went around this was a good fix. To make it better, you could put your colorbox initialization code to a chunk and use maxigallery parameter &js=`chunkname` to tell maxigallery to include that to code to your template. Then you don’t have to have colorbox files modified and you can update it easily by just replacing it’s files.

All in all, good job and thanks for the write-up, good info for others wanting to do the same.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

14 Posts

clunch Reply #7, 16 years, 9 months ago

Yeeees. Thanks for the further input!

In response:

1. I figured out the &display=`embedded` slimbox thing fairly early on, but the problem persisted..until I took a second (okay, third) look at my header chunk and realized that at some point I had actually copy/pasted the slimbox call straight into the head! DURRRRR.

2. Yes.

3. Ah, using &js=`` in MG would be substantially more slick, however, the colorbox chunk as it stands currently is also interacting with a jot review section and a contact us eForm type thing (loading either or both into a modal window). Do you think it would be wise to divide up the colorbox chunk further or leave it as is? Also..not that this is related at all, but I’m trying to AJAX those two forms up so they refresh in the modal window instead of reloading the page--using the jQuery forms plugin. It doesn’t quite work yet, but eh.. one of these days

74 Posts

jasonimani Reply #8, 16 years, 8 months ago

Hey Doze or clunch,

I was wondering if either of you have had problems (or solutions) with colorbox when sorting? If I put Jquery in noconflict mode colorbox breaks, but sorting then works.

Thanks for any suggestions.

_jason