MaxiGallery and jquery menu and ThickBox

4,213 Posts

doze Reply #21, 17 years, 9 months ago

As said many times already, it’s not a conflict between jQuery and MaxiGallery, it’s a conflict with jQuery and lightbox v2 that you are using.

As for all the troubles that you are having, there wouldn’t be so many if you would take the time to learn stuff before you go and try to implement something. 99% of the questions that I get in MaxiGallery forums are from people that try to do all kinds of very custom things without knowing much about the code that it consists of.. It would be good to start from the basic stuff and add things one by one with actually understanding what you are doing and why.

In any case, when you tried to use Thickbox in MaxiGallery, you didn’t do the custom template like said in the Wiki article I linked to you. So here’s what you should have done:

[!MaxiGallery? &galleryPictureTpl=`mg_thickbox_galleryPictureTpl` &pics_in_a_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`!]

Chunk named "mg_thickbox_galleryPictureTpl":

<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>

Then make sure that the thickbox resources are in the <head> of your template and that the jquery library version is correct for the thickbox.

And no, you don’t have to use thickbox, you can use what ever javascript you like, or could even make a flash based gallery. This is just one example of using some jQuery script. The templates in MaxiGallery is meant as a default templates for the "built-in" display types, but you can change their content to be whatever depending on your needs.

I don’t really like to give this kind of replies when now you are just going to copy paste the code and not really think about it. I like more to give just hints on how to do thing and make you do the actual thinking, implementation and work.. that’s the best way to learn stuff.

When you want to do custom things, to what MODx is very capable platform, you need to do just that: custom work. You can’t expect to get all going by just pressing few buttons, copy pasting resources from repository and calling them with defaults. That’s how you get the default implementations. For the custom stuff, you have to think your self and do the work.

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

1,161 Posts

Photowebmax Reply #22, 17 years, 9 months ago

Thanks for you patience. I will try that again.

I did try other calls. I also tried using the code you linked to. I found that on another thread. I tried entering it with a template and not a chunk though. I sort of had it working but the side content covered part of the image. This might be some z-index or other CSS issue. Its interesting to note that your method might work with scripts other than Thickbox. Thickbox is not my favorite.

I sense your frustration with me. But I have to tell you that I have spent a lot of time wrestling with this. I work with computers all day. I push pixels around and am comfortable with the artsy stuff. Looking at snippet code, PHP and javascript is something I just find very difficult though. The front page of the MODx site states, "MODx makes working with the tools du jour easy..." That might be true for developers, script geeks and folks who know every nook and cranny of MODx.

To me MODx is an attractive tool. I have vented a lot of frustration with it along the way. I have come a long way though. At times like these I want to wash my hands of the whole thing, but I have invested a lot of successful investigation to stop now.

I know quite a few photographers, artists and designers who have dipped into the CMS pool. Much of the discussion centers around "do I have to learn programming just to build the site I want?" That is a difficult question to answer. A lot of non developers are looking for guidelines that help with "if I want this look or that function how do I..." To developers this might seem like just reading the Cliff Notes instead of the actual novel in English class. I have also heard the comment "I don’t want to take night school javascript classes just to build a cool image gallery for my pictures..."

The other comment or complaint I hear within my circle is that within most developer framework sites there exists a culture of language that is hard to fathom at times. Some find you either understand what people are talking about or you don’t.

Most of my "Aha!" moments with MODx comes from wading through previous threads, trial & error, and lots of time. Sometimes I understand the method/solution but it is the language that is hard to decipher. Still, I can’t help feel that a better, more user friendly documentation will help aid code challenged fools like myself. Some of the modules and snippets list tons of assets, values, parameters, placeholders, calls etc. Newcomers might like a non-programer heavy lingo explanation that offers: "you want this look/effect/function then use THIS and here is WHY..."

But enough rambling. I will drop the no.Conflict path and return to the Lightbox method you describe.

53 Posts

shuriken Reply #23, 17 years, 9 months ago

I think the development of MODx will always prioritise flexibility and new horizons over ease-of-uptake. This can make its features seem vaguely defined until you remember that it’s primarily a content ’framework’, not a ’system’. Standard ways of using the framework often come about by nothing more than convention. And this leaves room for separate projects to carve out a niche and even compete (in a sense) with each other. I think one of the most amazing things about MODx is that so many of these add-on projects have fully adopted this ethos of flexibility and extensibility, rather than being rigidly configured bolt-on features. MaxiGallery is a good example of this.

Figuring out how to implement something in MODx can sometimes be just as frustrating and time-consuming as writing code without it. But you generally end up with something much more useful and adaptable. To the question "do I have to learn programming just to build the site I want [with MODx]?", the answer is probably ’yes, a smidgen’, but you don’t need a CS degree. Sorry if this sounds patronising but if you’re using MODx you’re already learning about web development in general. The more you learn the easier it will get. There’s no point trying to fight it.

4,213 Posts

doze Reply #24, 17 years, 9 months ago

Yes.. I think that MODx is not for everyone.. But even photographers and less techy people can do great things with MODx even if they use the resources with their default settings. They can still achieve features that would be much custom work in some other cms/app to set up.

For example in MaxiGallery, there are few "built-in" display types that shows examples that what can be done with the snippet. Some people think that those display types are the only ones that can be used, period. But actually they are just examples of what can be done and great for less techy users, when they can just call the snippet with certain parameters and get nice output right away, for example smoothgallery or lightbox display types.. or just the normal display type.

I think that such things would not be as easy to setup in many other cms/webapps. That’s why in MODx, it’s sometimes very easy for people to build nice site without knowing how to code at all, if they can manage it with the default settings. But MODx may just be a little too easy some times, because I have gotten much questions on how to implement various very very custom things from people that do not know anything for example about javascript, and I think it’s much because they have been able to create something "amazing" at very little work without knowing how much code is actually running behind the curtains. Then if I reply to the questions that if you want to do that, you must use custom templates in maxigallery and write javascript functions to handle things, they say "omg, why modx is so difficult" without realizing that what they are trying to do, even if just to modify some lightbox behaviour, they have to start from the beginning because they have to do some of the code that is done in maxigallery templates by default for lightboxv2 for example. And I can’t do built-in examples for every js library out there... so if you need something that is not part of the default settings, you need to start coding. This doesn’t apply to all resouces, and ofcourse if you need little changes, you may not need to know how to code, you can just change some config file or something...

But, yeah, I think that sometimes MODx is too easy to work with, as in you can do great things with very little work or knowing much about coding or css or anything.. because at least I have seen slight increase in questions from non-coding people how to implement very advanced stuff without knowing anything and most expect that I’ll provide the js and template etc code to do it..

BUT! and this is a big but, don’t get me wrong, I’m not here to talk down to you and saying that I don’t like to help or anything... not at all! Sometimes I’m just little fed up with this talk that why everything is so difficult and why it can’t be just plug-and-play even when the things that are very custom things to do.. but I’ll get over it pretty fast

So yes, I’m here to help and if you have problems in implementing that Thickbox or any other js script to your gallery, a online link to example installation would be a good start for me to figure out what’s wrong.

And sorry for the off-topic rambling.. laugh

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

1,161 Posts

Photowebmax Reply #25, 17 years, 9 months ago

Thanks for the encouragement!

I did try what Doze suggested but I can’t get Thickbox to work properly. Clicking on an image thumbnail will only present the full image in a plain browser window without the rest of the page content or image nav system. I need to figure out if this is due to the template, the call, or the path to the thickbox.js or thickbox.css?

To clarify I am not a developer in the dynamic sense but I have successfully built quite a few decent sites with XHTML and CSS. ALthough CSS was a pain to learn as well there are a lot less moving parts with the html and style sheet combination.

4,213 Posts

doze Reply #26, 17 years, 9 months ago

Quote from: Photowebmax at Dec 20, 2008, 02:16 PM

Clicking on an image thumbnail will only present the full image in a plain browser window without the rest of the page content or image nav system.

That happens if the ThickBox js is not on the page, so probably you are pointing to a wrong path or something.. If you can provide online page of this, I can help better.

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

1,161 Posts

Photowebmax Reply #27, 17 years, 9 months ago

I am trying different things but am not seeing the culprit.

Say I have a template called "galleryPicture" with the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
		<title>[(site_name)] | [*pagetitle*]</title>

	<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />

	<link rel="stylesheet" href="[(base_url)]assets/templates/phototest/style.css" type="text/css" media="screen" />
        <base href="[(site_url)]" />

<!--[if lte IE 6]>

  <style type="text/css" media="screen, tv, projection">
        body { behavior: url(assets/js/csshover.htc); } /* hover:anything support */
        #content { margin-left: 22px; } /* to avoid the BMH */
        a,  a:link { border-bottom-style: solid } /* becaue IE just doesn't dot */
  </style>

  <script type="text/javascript" src="assets/js/sleight.js"></script>

<![endif]-->

        


<script src="assets/templates/phototest/jq/jquery-1.2.6.js" type="text/javascript"></script>



<script type="text/javascript">
<!-- 
var jQuery = jQuery.noConflict(); 
-->
</script>


<! nav javascript starts here! >


<script>
jQuery(function() {
      // set opacity to nill on page load
       jQuery("ul#topnav span").css("opacity","0");
      // on mouse over
     jQuery("ul#topnav span").hover(function () {
         // animate opacity to full
         jQuery(this).stop().animate({
            opacity: 1
         }, 'slow');
      },
      // on mouse out
      function () {
         // animate opacity to nill
         jQuery(this).stop().animate({
            opacity: 0
         }, 'slow');
      });

   });
</script>
<! nav javascript ends !>




<script type="text/javascript">
<!-- 
var jQuery = jQuery.noConflict(); 
-->
</script>

<script src="assets/templates/phototest/jq/thickbox.js" type="text/javascript"></script>
<link rel="stylesheet" href=assets/templates/phototest/thickbox.css" type="text/css" media="screen" />


</head>

<body>
<div id="wrapper">
	<ul id="topnav">
    	<li><a href="index.php?id=1" class="home"><span></span></a></li>
     <li><a href="index.php?id=2" class="portfolio"><span></span></a></li>
     <li><a href="index.php?id=3" class="services"><span></span></a></li>
	<li><a href="index.php?id=4" class="about"><span></span></a></li>
	<li><a href="index.php?id=5" class="contact"><span></span></a></li>
    </ul>

	

 <div id="content">
<div id="left_column"><!-- left column begins -->
<h1><a href="[~1~]"</a></h1>

		<div class="post">
	<h3 id="post-">[*longtitle*]</h3>	
[*#content*]

 </div><!-- post closes(left_column content) -->
</div><!-- left column ends -->

		 <div id="right_column">
   
		<ul>
					<ul>
			<li id="dropmenu"><a name="dropmenu"></a><h2>Pages:</h2>
			[!Wayfinder? &startId=`0`!]
			</li>
	      </ul>



	            <h7>Sister Sites:</h7>
		<p><a href="/" title=" Photography."> PHOTOGRAPHY</a></p>
                           <p><a href=" " title=" DESIGN.">abcdef</a></p

                 
                 <h7>Elsewhere:</h7>
	     <p><a href="http://modxcms.com/" title="Powered by MODx, Do more with less.">MOD<strong>x</strong></a></p>


		      
			
		



	</div>
	<!-- close #right_column -->

<div class="clearfloats"></div>


 </div><!-- content ends -->
</div><!-- wrapper closes -->
<div id="footer">
{{footer}}
</div><!-- footer closes-->




</body>
</html>

I have also created a chunck called mg_thickbox_galleryPictureTpl with the following:

<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>

And MaxiGallery page snippet call with the folowing:

[!MaxiGallery? &galleryPictureTpl=`mg_thickbox_galleryPictureTpl` &pics_in_a_row=`3` &max_thumb_size=`110` &max_pic_size=`0` &thumb_use_dropshadow=`1`!]

Do you see my error? I might have to install and post this mess on a live server to really show the issue though.

Max

4,213 Posts

doze Reply #28, 17 years, 9 months ago

do not use jQuery in noconflict mode.

Eg. remove these (both of them):

<script type="text/javascript">
<!-- 
var jQuery = jQuery.noConflict(); 
-->
</script>

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

1,161 Posts

Photowebmax Reply #29, 17 years, 9 months ago

OK,

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...

I followed your advice and dumped the noconflcit mode and went through the template carefully, cleaning up a few things along the way and <drum roll please> it works!!! The MaxiGallery snippet call no longer conflicts with my jQuery code.

The visual flourishes that Thickbox has I am not wild about though. I guess I can carefully try using another lightbox script or taking a stab at modifying the Thickbox CSS? I think I might try this (while backing up what I have now). CSS is one aspect of this game I am comfortable with.

Doze and others: I must give a major thank you and much kudos for all your help and patience. I feel I should apologize for my frustrated grumbling as well.

On the plus side I have learned a lot through this experience...

1,161 Posts

Photowebmax Reply #30, 17 years, 9 months ago

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

http://fancy.klade.lv/