MaxiGallery and jquery menu and ThickBox

2,877 Posts

mrhaw Reply #31, 17 years, 9 months ago

Just got back from navigating Seattle hills in our third snow storm in a week, this in my old 30-year-old Land Cruiser. It very seldom snows in Seattle and the outcome is not pretty...

My fiance lives in WA! Hoping for snowmobiling when I come out there!! cool

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower

4,213 Posts

doze Reply #32, 17 years, 9 months ago

Quote from: Photowebmax at Dec 20, 2008, 06:51 PM

Just for grins: I am assuming this version would work with the jQuery arena we are talking about...

http://fancy.klade.lv/

Yes, you can use that or any other javascript... I just pointed you to Thickbox because you were already using jQuery on your page and that’s the only jQuery script that came to my mind.

So just look at how the html should be formed to the FancyBox script and update your galleryPictureTpl accordingly. (and add the FancyBox scripts to your template <head>, or if you want that MaxiGallery adds them automatically, look at the &js and &css parameters in MaxiGallery wiki page)

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

4,205 Posts

dev_cw Reply #33, 17 years, 9 months ago

Quote from: Photowebmax at Dec 20, 2008, 06:51 PM

Just for grins: I am assuming this version would work with the jQuery arena we are talking about...
http://fancy.klade.lv/

100%. I have used that one before. It is a jQuery plugin like ThickBox. Unlike TB this one works with noConflict without any editing of the source. This is a call from a site:

        <script type="text/javascript" src="assets/js/jquery.fancybox.js"></script> 
	<script type="text/javascript" src="assets/js/jquery.pngFix.js"></script> 
	<script type="text/javascript"> 
		jQuery.noConflict();
		jQuery(document).ready(function($){ 
		$(document).pngFix(); 
		$("div.image_thumb a").fancybox({ 'hideOnContentClick': true });
		}); 
	</script>

Edit the selector to match your tpl for the gallery: $("div.image_thumb a") could be simply $(".gallery") depending on the needs.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

1,161 Posts

Photowebmax Reply #34, 17 years, 9 months ago

Thanks Guys.

I did a lot of searching last night and there are lots of variations on the whole lightbox script idea. It seems like a trade off between factors like, ease of use, browser issues, bit size, transitions, and how the script handles image sizing. Some users will present large size files and rely on the script to shrink them for viewer display sizes. I will be using a fixed size. Looks like the guy who wrote Thickbox does not like the moving transition effect between images. But there a lot of folks who are asking for this effect to be included in future Thickbox releases.

Depending on how things go I might want to take a look at how I present my thumbnails. I have used the lightbox before in a static site and one of the "issues" is how neatly the rows of thumbnails get presented. Mixing horizontal and vertical thumbnails will in effect present a less than clean presentation. Cropping all the thumbnails into perfect squares takes care of this, but it interferes with the smooth uploading and automation feature that I really like about MaxiGallery within MODx.

But in any event it is nice to have the whole jQuery nav vs lightbox script conflict taken care of...

4,213 Posts

doze Reply #35, 17 years, 9 months ago

Quote from: Photowebmax at Dec 21, 2008, 12:18 PM

Depending on how things go I might want to take a look at how I present my thumbnails. I have used the lightbox before in a static site and one of the "issues" is how neatly the rows of thumbnails get presented. Mixing horizontal and vertical thumbnails will in effect present a less the clean presentation. Cropping all the thumbnails into perfect squares takes care of this, but it interferes with the smooth uploading and automation feature that I really like about MaxiGallery within MODx.

You can "crop" the thumbnails into squares with css, look here, or you could use phpThumb PHx modifier together with MaxiGallery to crop the thumbnails into squares. The later requires lots more work to set up.

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

1,161 Posts

Photowebmax Reply #36, 17 years, 9 months ago

Thanks, I will look into that. In this case I don’t mind doing it all with Photoshop (my primary weapon...)

4,213 Posts

doze Reply #37, 17 years, 9 months ago

You can set that css cropping up in just minutes.. of course it will crop from a static point each thumbnail, but it’s easy to setup.

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

1,161 Posts

Photowebmax Reply #38, 17 years, 9 months ago

Yes, I think the CSS option is the better path for me...

57 Posts

annii Reply #39, 17 years, 6 months ago

Hi
I found this thread really helpful, as I had the same conflict. I’ve managed to get a "pretty" version working much like lightbox (in fact it uses it I think) instead of thickbox and the like...

So, if it helps anyone here’s my tpl:

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

and here’s my snippet call:

[!MaxiGallery? &display=`embedded` &embedtype=`thumbv` &pics_in_a_row=`4` &galleryPictureTpl=`mg_thumbv_galleryPictureTpl` &max_thumb_size=`100` &max_pic_size=`500` &titles_in_overview=`1` &keep_bigimg=`1` &pics_per_page=`16`!]

and all you need is to download and point to one stylesheet and one javascript file in the head

<link rel="stylesheet" href="./thumbnailviewer.css" type="text/css" />
<script src="../thumbnailviewer.js" type="text/javascript">
/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

Hope it helps

Anni

32 Posts

overhaulmedia Reply #40, 17 years, 5 months ago

I can not get thickbox to work properly for the life of me.

It works to the point of loading up and showing the loading animation it just sits there and spins. I checked the source of the output and it looks like the URL is right and the image is there in /galleries/8/imagename.jpg

Any suggestions?