Javascript issues with Galleria/upm_image

carbide · 2009-04-16 12:18:41

I’m following the TXP tips instructions and have been going in circles trying to figure out what’s going wrong.

I have used jquery.min 1.2.3, after trying the current release and not seeing any improvement when I switched @rel to rel. The .js files are both in the right directory, as far as I can tell. Neither of the .js files seem to be called at all. The galleria.css file is working fine. upm_image seems to be working fine, too.

This page (user/pass: lisa/lisa) is showing the problem – the CSS is producing the thumbnails, but there is no Javascript going on, no main image, no action on clicking the thumbnails.

I can understand (I think) how Galleria works on a freestanding list, and I am following (again, I think!) the upm_image implementation, and I think I am linking to both Javascript files correctly. One of those things must be wrong – I would be very grateful if anyone could offer me a suggestion!

keith · 2009-04-16 12:45:53

Don’t you need a slash in front of the paths to the JS files?:

<script type="text/javascript" src="/jquery.min.js"></script> 
<script type="text/javascript" src="/jquery.galleria.js"></script>

carbide · 2009-04-16 13:13:16

keith wrote:

Don’t you need a slash in front of the paths to the JS files?:

<script type="text/javascript" src="/jquery.min.js"></script> 
<script type="text/javascript" src="/jquery.galleria.js"></script>

Sorry, yep, I had been messing around with different permutations to try to figure out what was wrong. The slashes are back in place, but it’s still not working.

jakob · 2009-04-16 15:05:46

Looks like a copy-past error as you are targetting a gallery that is not there – you have this in your js:

$('ul.gallery').galleria()

but this as the class name for your div:

<ul class="galleria">

so you need to make it $('ul.galleria').galleria()

Apart from that you should definitely try and clear up your validation errors and txp form errors first (plentiful but simple to resolve – things like missing trailing slashes and block elements such as headings inside inline elements such as span). Both yourself and javascript will have an easier time navigating your code.

carbide · 2009-04-16 15:38:06

Thanks jakob, I’ve started clearing up those errors – this is a bit of a learning process for me so it’s embarrassing to be showing all the mistakes. I realise the messiness is not going to make it easier to locate problems.

I fixed the JS to target ‘galleria’, but that didn’t resolve it either, I’m afraid.

jakob · 2009-04-16 18:18:07

No matter about the errors. If you change a lot of the spans to divs that will rid you of most the errors (e.g. h3, ul etc. shouldn’t go inside a span but they can go inside a div):

Then check your javascript notation carefully against the original instructions or the demo pages as I think you have a syntax error. Usually going back to first principles, then progressively adding back your own stuff testing continually helps to find the error:

   <script type="text/javascript">
        jQuery(function($) { 
              $('ul.galleria').galleria(); 
        }); 
    </script>

There’s a forum thread on adding the active class here in an independent script section:

   <script type="text/javascript">
        $(document).ready(function() {
              $("ul.galleria li:first").addClass('active');
        });
    </script>

Thinking about it you can also add your class=“active” manually by calling upm_article_image twice, the first time with limit="1" with <li class="active"> in your form and the second time with offset="1" with normal <li> to continue listing the remaining images.

jstubbs · 2009-04-16 18:30:52

Hi carbide,

I implemented Galleria a little differently from the TXP Tip article, but I can’t remember exactly what I changed…might remember by helping you…

I have this in my page:

<script type="text/javascript">
$(document).ready(function(){
$("ul.galleria li:first").addClass('active');
});
</script>

On my page I also call the JS that is featured on the advanced demo Galleria page.

carbide · 2009-04-17 11:52:29

jakob and jstubbs, thank you so much for your help and patience. It was a syntax error, and I realised in the process that I was linking the wrong stylesheet too.

Textpattern CMS

Textpattern CMS support forum

#1 2009-04-16 12:18:41

Javascript issues with Galleria/upm_image

#2 2009-04-16 12:45:53

Re: Javascript issues with Galleria/upm_image

#3 2009-04-16 13:13:16

Re: Javascript issues with Galleria/upm_image

#4 2009-04-16 15:05:46

Re: Javascript issues with Galleria/upm_image

#5 2009-04-16 15:38:06

Re: Javascript issues with Galleria/upm_image

#6 2009-04-16 18:18:07

Re: Javascript issues with Galleria/upm_image

#7 2009-04-16 18:30:52

Re: Javascript issues with Galleria/upm_image

#8 2009-04-17 11:52:29

Re: Javascript issues with Galleria/upm_image

Board footer