MaxiGallery and jquery menu and ThickBox

1,161 Posts

Photowebmax Reply #11, 17 years, 9 months ago

Well, I ma not making much progress here. I sort of have the Thickbox working.

But I have some issues. Next to the image thumbnail the following characters appear: . [+maxigallery.picture.title:isnot=``:then=`
`+]

Clicking on the thumbnail will present the full image but it does not float on top of the page. All the content in my sidebar column sits on top of the image.

Also, it appears that Thickbox does not have the cool transition effect that the other lightboxes have. This is sort of deal breaker form me. I found this jQuery version of slimbox: http://leandrovieira.com/projects/jquery/lightbox/# Would this work with Maxigallery and not ruin the effect of my top jQuery navigation?

Not sure what to do at this point? Do I keep the usual MaxiGallery calls and adjust the jQuery code? Or do I dump my jQuery navigation and look for a solution there that will play nicely with MaxiGallery?

I am getting fairly frustrated with this and would love to find a coder who can walk me through this. I don’t mind paying for this either...

Thanks!

Max

53 Posts

shuriken Reply #12, 17 years, 9 months ago

Quote from: doze at Dec 19, 2008, 02:34 AM

The bad thing with Highslide is that it’s not free for commercial use..

True, but in the context of building a commercial site it’s not expensive.

Quote from: doze at Dec 19, 2008, 02:34 AM

I think many people has not even noticed it and are using it on their clients websites..

Perhaps, which is why the author asks non-commercial distributors to make it clear. It’s always going to be an issue though.

Quote from: Photowebmax at Dec 19, 2008, 12:28 PM

Will Thickbox and Highslide work with MaxiGallery: the system of using the MODx Manager to organize and uplload images etc?

Of course. It’s just a matter of editing your template chunk(s). The token conflict is between Mootools and jQuery, not MaxiGallery and jQuery. This thread describes a fix.

You will have to get used to MaxiGallery’s use of templates with PHx syntax though.

1,161 Posts

Photowebmax Reply #13, 17 years, 9 months ago

I think I am going to try backing up and not go with the Thickbox or the Highslide systems. Trying to get these to function as smoothly within MaxiGallery is not working for me: the process of solving a probelm is introducing deeper levels of problems. I seemed to get caught up adding extra javascript, templates, graphics, and css.

So I am back where I started: the site functions well and the MaxiGallery works great expect the top nav dispalys the entire row in the hover state. So its the conflict with Mootools and Jquery here. I have read the thread mentioned and the noconflcit jQuery page. Its hard to follow for a guy with no javascript skills though. It would be nice to see an example.

This the code I am using in the head of the template :

<script src="assets/templates/phototest/jq/jquery-1.2.6.js" type="text/javascript"></script>
<script>
$(function() {
// set opacity to nill on page load
$("ul#topnav span").css("opacity","0");
// on mouse over
$("ul#topnav span").hover(function () {
// animate opacity to full
$(this).stop().animate({
opacity: 1
}, ’slow’);
},
// on mouse out
function () {
// animate opacity to nill
$(this).stop().animate({
opacity: 0
}, ’slow’);
});
});
</script>

Max

53 Posts

shuriken Reply #14, 17 years, 9 months ago

Quote from: Photowebmax at Dec 19, 2008, 08:25 PM

It would be nice to see an example.

The noConflict page is just a reference. For examples, this is the page you want: http://docs.jquery.com/Using_jQuery_with_Other_Libraries

So basically,

<script src=<....mootools> (added automatically by MaxiGallery)
<script src=<....jquery> (added by you)
<script>
     jQuery.noConflict();

And then you replace the 4 instances of the dollar sign in your code with the word ’jQuery’.

1,161 Posts

Photowebmax Reply #15, 17 years, 9 months ago

I dont think I am doing this correctly.

Again, this is what I have in the template head:

<script src="assets/templates/phototest/jq/jquery-1.2.6.js" type="text/javascript"></script>
<script>
   $(function() {
      // set opacity to nill on page load
      $("ul#topnav span").css("opacity","0");
      // on mouse over
      $("ul#topnav span").hover(function () {
         // animate opacity to full
         $(this).stop().animate({
            opacity: 1
         }, 'slow');
      },
      // on mouse out
      function () {
         // animate opacity to nill
         $(this).stop().animate({
            opacity: 0
         }, 'slow');
      });
   });
</script>

I replaced that with the following:

<script src="assets/templates/phototest/jq/jquery-1.2.6.js" type="text/javascript"></script>
<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>
<script>jQuery.noConflict();</script>

But it does not do anything to solve the conflict with the nav menu and the MaxiGallery page?

Thanks,

Max

53 Posts

shuriken Reply #16, 17 years, 9 months ago

Not sure if it will help but the noConflict line goes here wink

1,161 Posts

Photowebmax Reply #17, 17 years, 9 months ago

Thanks, I tried that but the conflict remains huh

I need to sleep on this. As much as I am intrigued with MODx I am tired with fighting with all this stuff. The CMS features are wonderful but I can build four static sites in the time it takes me to get one of these projects completed. This is my second round with working with MODx after a hibernation period.

The static framework I created works perfectly with the jQuery I am using. It also worked perfectly within MODx until I began using the MaxiGallery snippet. Up to this point I was making fast progress on this my third MODx site. I guess if I can’t get this to work I have two choices: dump the jQuery I spent so much time on or not use MODx for this project? The main content of this site will be image galleries. Of all the lightbox scripts I have tried the Thickbox is the least appealing from a visual sense. If it turns out that the only MaxiGallery solution that will work with jQuery is indeed Thickbox then I might have to look for a non MaxiGallery MODx gallery system that does not conflict with Mootools or not use MODx at all in this case.

I admit I do not have much scripting skills or experience and find most of the online "how to" information hard to wrap my head around. After doing some web searching on the subject of jQuery and Mootools it does seem like using multiple javascript libraries is a major hurdle. I don’t know much about either library but it seems like jQuery is the emerging, more easy to follow option. There are a lot of helpful sites that illustrate the features of jQuery. Rather than swallowing you in code some well documented sites illustrate the wonders of "you want this cool effect - then use this code" with actual samples.

But maybe I am way off base here. If lots of folks want to use jQuery effects on their MODx pages then the forums would have more questions and possible solutions?

But its always better to look at these problems in the morning...

Max

2,314 Posts

anonymized-26931 Reply #18, 17 years, 9 months ago

Hi,

maybe you can try that:

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

place it after your jquery-library call, and in front your js call, it worked for me.

cheers, j

1,161 Posts

Photowebmax Reply #19, 17 years, 9 months ago

Thanks, I tried that but no go. I tried moving the order of the nav js, the jquery library call and the noConflict around in different orders. It either did nothing or caused the conflict to erupt on all pages, not just MaxiGallery pages.

This is where I am siting at now: all the MODx pages work fine with the jQuery but the active MaxiGallery will show the confict. The good news is that I do get the "Manage Pictures" button.

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

2,314 Posts

anonymized-26931 Reply #20, 17 years, 9 months ago

maybe the variable name "jQuery" doesn’t work? try something different...maybe

var jq = jQuery.noConflict();

i’m no js expert btw...just a guessing, i’m as well in javascript-hell today grin