[Solved]File location issue -jQuery

jasnick · Post by **jasnick** » Sun Sep 22, 2013 12:53 am

Using 1.11.8

What is the correct way to specify jQuery files?

In <head> of template I have:

<link rel="stylesheet" type="text/css" href="http://site.com.au/jquery.lightbox-0.5.css" media="screen" />
 <__script__ type="text/javascript" src="http://site.com.au/jquery.js"></__script>
<__script__ type="text/javascript" src="http://site.com.au/jquery.lightbox-0.5.js"></__script>	 
    <__script__ type="text/javascript">   
$(function() {
        $('#imagebox a').lightBox();
    });   
</__script>

However jQuery Tools module is in Modules, so should it be:

Code: Select all

<link rel="stylesheet" type="text/css" href="http://site.com.au/modules/JQueryTools/jquery.lightbox-0.5.css" media="screen" />

in each case?
Thanks

My developer Page on the Forge · Post by **Jo Morg** » Sun Sep 22, 2013 1:14 pm

Apparently, this is related to your other post...
You do need to read the help file of the module. JQueryTools has it's own tag to initialize JQuery and the plugins it has on it's library. If you use them you don't need to explicitly link to the files on the template, AFAIK...

jasnick · Post by **jasnick** » Sun Sep 22, 2013 3:03 pm

Thank Jo Morg - yes I did have a quick look at the Help file, obviously I will need to study it more. I am perhaps making it more complicated than it need be.
Back to the drawing board tomorrow.
Thanks!

jasnick · Post by **jasnick** » Tue Sep 24, 2013 7:01 am

In the old days, I used to download whatever js scripts I needed and put them in the<head>/. So now JQueryTools does the same thing?

From my understanding of the Help file:

{JQueryTools action=placemarker nocache} goes in the page template just above the </head>

{JQueryTools action=require lib=lightbox nocache} goes in the page content.

Is there any particular place in content? Are we talking in the Content editing box on the actual page or are we talking about putting it in the template somewhere? Is anything else needed?

In the sample given it also says to Call the Uploads module from a page. i.e:
{Uploads category=category_name}

Now I am REALLY confused. Is this a module that needs downloading or is it the same as the Uploads folder? I found a very old post by Calguy: In the Uploads module a 'category' is synonymous with a directory.

Also, The placemarker action does the job of generating the html to insert the jquery scripts, and the various addon libraries that were requested via the require action. Therefore the placemarker action must be called AFTER all calls to the require action. Please keep in mind that CMSMS divides page templates into three portions and processes them in this order: The top portion of the page before the <__html> tag. The body section, and the head section.

I am uploading the images via Products module but they are not being found.

My developer Page on the Forge · Post by **Jo Morg** » Tue Sep 24, 2013 2:01 pm

jasnick wrote:In the old days, I used to download whatever js scripts I needed and put them in the<head>/. So now JQueryTools does the same thing?

You still can. You just have to choose: either use JQueryTools (and do things the JQueryTools way) or skip JQueryTools and do things by inserting the right bits of code in the right places.

jasnick wrote:In the sample given it also says to Call the Uploads module from a page. i.e:{Uploads category=category_name}Now I am REALLY confused. Is this a module that needs downloading or is it the same as the Uploads folder? I found a very old post by Calguy: In the Uploads module a 'category' is synonymous with a directory.

That sample was pretty specific:

So you have uploaded some files to a category in the uploads module, and you want to use fancybox to preview the images from an Uploads module summary view.

Well, is that what you are trying to accomplish?
....

The simple aproach:

- place {JQueryTools action=placemarker} just before the closing BODY tag;
- place {JQueryTools action=require lib=lightbox nocache} either on your template if you want to use it on ANY page that is linked to that template, or place it specifically on the page contents (or create a content block for this purpose on the template), if you just want to use it on one page alone;

HTH

jasnick · Post by **jasnick** » Tue Sep 24, 2013 3:15 pm

Thanks Jo Morg

It is clearer now. I have adopted your simple approach and placed the code accordingly. Still no images appear.
Its getting late - will have to rethink this tomorrow. I still don't understand the bit about calling the Uploads module from a page. i.e:{Uploads category=category_name}. The images are currently located in Uploads/Products so I am wondering if I need to add something to the code so it acquires the images?

Thanks

My developer Page on the Forge · Post by **Jo Morg** » Tue Sep 24, 2013 3:44 pm

jasnick wrote:Still no images appear.

jasnick wrote:I still don't understand the bit about calling the Uploads module from a page. i.e:{Uploads category=category_name}. The images are currently located in Uploads/Products so I am wondering if I need to add something to the code so it acquires the images?

That's a different problem. If you are using Products, the template from Products (probably the summary template or equivalent) must be configured, not only to show the images (thats a simple template process problem), but also must have the css id's or classes needed by the lightbox library. You need to search and read the lightbox JQuery plugin in order to know how to use it.

The issue seems to be twofold:

The template needs to show the images: check Products help on how to go about doing that (images will have to show somehow even before you start using lightbox);
The images must be correctly tagged for lightbox to recognize them and set them the way you want (see lightbox help docs);

There is no need for Uploads and you can just forget about that bit...
HTH

jasnick · Post by **jasnick** » Wed Sep 25, 2013 5:56 am

Hi Jo Morg

Am pleased to say I have fixed the Jquery issue. I went with the adding my own js files to the site in a folder called Jquery. It turned out this was quite OK except that no images were showing. It was the lack of images that was the issue, not Jquery.

After the past several days troubleshooting this issue it turned out the template in Products was looking for photo1 and photo 2 etc when it should have been looking for Photo1 and Photo2 etc.

At some early stage in my troubleshooting I did realise this was an issue and made sure my field definitions were the same as in the template but after multiple copying and pasting of the template, the old one was used instead of the corrected one and it wasn't until I was sending the problem to the hosting company that I saw the templates side by side and picked up the difference. I won't forget that in a hurry!

Thank you for your patient assistance - it helped me realise that Jquery was not the issue.

CMS Made Simple Forums

[Solved]File location issue -jQuery

[Solved]File location issue -jQuery

Re: File location issue -jQuery

Re: File location issue -jQuery

Re: File location issue -jQuery

Re: File location issue -jQuery

Re: File location issue -jQuery

Re: File location issue -jQuery

Re: [Solved]File location issue -jQuery