Adding java script for each new document

12 Posts

sintls Reply #1, 15 years, 8 months ago

Hi,

Need support how to achieve addition of java script for each new document.I have converted most of my static html/css/js website to modx template. Every html page uses a custom java script which changes the images at certain interval from image folder. I want to incorporate that in modx site documents I plan to create.

I tried to include my java script in chunk called "Product1"and add that chunk [[$Product1]] in new document editor but not working.

Similarly Product2 will have different set of images so in my static website i have javascript for product 2, so when i create a new documents for product 2 i would like to call Product 2 javascript.

Here is the java script in chunk

<script language="JavaScript" type="text/javascript">

</script>

thnx
sintl

☆ A M B ☆
104 Posts

Scott Wespi Reply #2, 15 years, 8 months ago

I’d create a template variable with input option values set to @DIRECTORY assets/templates/, then set the type to drop down so you can choose a folder for that template. From there, you can dynamically list all of the images from that folder with a simple snippet, like FileLister.

That would simplify your scripts significantly, so that you could include this in a separate file, or somewhere at the top of your template page:

<script language="JavaScript" type="text/javascript">
<!--
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/
gSlideshowInterval = 4;
function canManipulateImages() {
	if (document.images)
		return true;
	else
		return false;
}
function loadSlide(imageURL) {
	if (gImageCapableBrowser) {
		document.slide.src = imageURL;
		return false;
	} else {
		return true;
	}
}

function nextSlide() {
	//gCurrentImage = (gCurrentImage + 1) % gNumberOfImages;
	gCurrentImage = (gCurrentImage + 1) % gImages.length;
	loadSlide(gImages[gCurrentImage]);
}
</script>

and then put this at the bottom of your template page, or wherever you had it before:

<script type="text/javascript">
<!-- 
gImages = [ [[!FileLister?&path=`[[*your-path-tv]]`]] ];

gImageCapableBrowser = canManipulateImages();
gCurrentImage = 0;
setInterval("nextSlide()",gSlideshowInterval * 1000);
// -->
</script>

You should modify your FileLister link template to be something like:

'[[+url]]',

Note: I’ve never used FileLister, it just came up higher on Google than anything else wink

www.darkstardesign.com

Are you in the Nashville area? Join us for our next MODX meetup!

12 Posts

sintls Reply #3, 15 years, 7 months ago

I have no coding skills , and trying to achieve the images rotation here >> http://indiansandstones.com/indian-sandstones/autumn_brown_sandstone.html

as per suggestion

1.created template variable with drop down linked to image folders directory
2.Tested new document the image folders available for selection, selected the one i want to use and saved here http://indiansandstones.com/sandstones/index.php?id=24
3.inserted the main js in head section of template
4.created a chunk for second js code and inserted in template content section

But have no clue how to use filelister or get the images rotation for this document.

pls guide

thnx
Sintl