Colorbox

loopernow · 2011-12-20 04:50:22

Hi,

I would like to use Colorbox, a very simple lightbox-esque javascript plugin, in my textpattern blog. I can use it successfully in a straight HTML file, but in textpattern the linked image just opens in a new window.

I’m an amateur user of html/css/cms’s/ftp/etc. A lot of it’s beyond me. Here’s essentially what you need in an html file to get Colorbox to work:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="colorbox.css" />
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</head>
<body>
<a class='gallery' href='image1.jpg'>Photo_1</a>
<a class='gallery' href='image2.jpg'>Photo_2</a>
<a class='gallery' href='image3.jpg'>Photo_3</a>
<script>
jQuery('a.gallery').colorbox();
</script>
</body>
</html>

(from http://jacklmoore.com/notes/colorbox-for-beginners/)

What I did to try and get this to work in my textpattern blog was this:

1. Pasted

<link rel="stylesheet" href="colorbox.css" />
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>

into my page template at the very end of the head section (but before </head>).

2. Pasted the equivalent of

<a class='gallery' href='image1.jpg'>Photo_1</a>

into my blog entry.

3. Pasted

<script>
jQuery('a.gallery').colorbox();
</script>

into my blog entry. When that didn’t work, I tried pasting it into my page template towards the end of the <body> section instead. Made no difference.

I don’t know if this makes any difference whatsoever, but in the Style section of my textpattern admin center, I’ve replaced the default style with only the following line:

@import ‘../blogstyle.css’;

——

Any ideas? Any help is much appreciated!

{Added bc.. for better code display -Uli}

Last edited by uli (2011-12-20 11:35:57)

uli · 2011-12-20 11:39:53

Have you uploaded the required js files?
Are they referenced correctly to the dot (names, paths)? The way you referenced them above they should reside in the root level folder of your installation, flat among the files, images, textpattern folders, not nested in an e.g js directory.

loopernow · 2012-01-19 03:39:59

Hi,

Thanks for the help. Sorry it has taken me awhile to investigate this.

Yes, the appropriate files have been uploaded to the server.

I think I have the right directory structure designated.

Here’s verbatim what I have in my page template:

this is inside the <head> tag

       <link rel="stylesheet" href="colorbox/colorbox.css" />
        <script src="colorbox/jquery.js"></script>
        <script src="colorbox/jquery.colorbox.js"></script>

this is inside the <body> tag

            <script>
            jQuery('a.colorbox').colorbox();
        </script>

And this is what is verbatim inside my textpattern article:

    <a class="colorbox" href="/images/blog/xochitl_creature.jpg" target="_blank" 
alt="Sample Image"><img src="/images/blog/xochitl_creature_small.jpg"> </a>

Here is the actual article in question: http://www.looperstation.com/blog/articles/6/jellyfish

This is the straight html page on the same server that functions correctly: http://looperstation.com/test.html

And here is the html of that page:

<!doctype html>
    <html>
    <head>
        <link rel="stylesheet" href="colorbox/colorbox.css" />
        <script src="colorbox/jquery.js"></script>
        <script src="colorbox/jquery.colorbox.js"></script>
    </head>
    <body>

    <a class="colorbox" href="images/blog/xochitl_creature.jpg" target="_blank" alt="Sample Image">
    <img src="images/blog/xochitl_creature_small.jpg"> </a>

            <script>
            jQuery('a.colorbox').colorbox();
        </script>

    </body>
</html>

Here is the relevant directory structure of my site, as best I can describe it:

root=“public_html” …. this is where the test.html file resides
“colorbox” directory is in the “public_html directory”
“blog” directory is in the public_html directory too …. inside “blog” directory is the “textpattern” directory

I know a bunch of textpattern files are inside the textpattern folder but I don’t know if any textpattern files are directly inside the blog folder, nor why the textpattern folder is inside the blog folder (seems redundant). It might be because I was testing to see if textpattern would work for my purposes. I had tried blosxom previously and I believe those are probably the few files that I see directly within the “blog” folder.

…

Does that help? Please let me know what other information I should provide or what else I should test/change and I’ll be happy to do so.

Thanks again.

Last edited by loopernow (2012-01-19 03:49:51)

joebaich · 2012-01-19 05:24:56

Open your site in Chrome and use the View/Developer Tools to check that the javascript and css files are being accessed. If they are, you will be able to see copies of them in the Resources section. If you can’t see their content, then you are not accessing them and likely have your paths wrong. You can do the same thing with the Develop option (which you have to enable) in Safari. You can do much the same thing with Firefox if you have the Firebug extension loaded.

uli · 2012-01-19 12:57:12

loopernow, you have inserted the colorbox code in your page for the comix section, not in the one you’re using for blog.

colak · 2012-01-19 13:38:14

Did you try

      <link rel="stylesheet" href="/colorbox/colorbox.css" />
        <script src="/colorbox/jquery.js"></script>
        <script src="/colorbox/jquery.colorbox.js"></script>

loopernow · 2012-01-20 01:15:59

Colak, that was exactly it, the missing “/” at the beginning of the path. I realized it this morning when I woke up, that I wasn’t referencing the right path. Writing it out here made it evident.

Thanks all! Much appreciated.

uli · 2012-01-20 12:28:57

loopernow wrote:

Here is the actual article in question: http://www.looperstation.com/blog/articles/6/jellyfish

That’s where there’s no colorbox code at all.

loopernow · 2012-01-21 04:32:57

Ah! Thank you! Added the code to the Archive page template, working now. Was only in the Default page template previously. Thanks again, uli.

Textpattern CMS

Textpattern CMS support forum

#1 2011-12-20 04:50:22

Colorbox

#2 2011-12-20 11:39:53

Re: Colorbox

#3 2012-01-19 03:39:59

Re: Colorbox

#4 2012-01-19 05:24:56

Re: Colorbox

#5 2012-01-19 12:57:12

Re: Colorbox

#6 2012-01-19 13:38:14

Re: Colorbox

#7 2012-01-20 01:15:59

Re: Colorbox

#8 2012-01-20 12:28:57

Re: Colorbox

#9 2012-01-21 04:32:57

Re: Colorbox

Board footer