Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Customising the CMS /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Inserting custom javascript


Go to End


16 Posts   10136 Views

Avatar
BelindaBJ

Community Member, 9 Posts

7 July 2009 at 9:17pm

Cheers, downloading firebug now.

Thanks for your help guys!

Will check out my code now.

Avatar
BelindaBJ

Community Member, 9 Posts

7 July 2009 at 10:05pm

It seems I have a different problem altogether, it's in the html code...

when I put the following code into the html section of my gallery page it changes from this:

<div id="dhtmlgoodies_slideshow">
	<div id="previewPane">
		<img src="assets/slideshow/image1big.jpg?r=44722"/>
		<span id="waitMessage">Loading image. Please wait</span>	
		<div id="largeImageCaption">This is the caption of image number 1</div>
	</div>
	<div id="galleryContainer">
		<div id="arrow_left"><img src="assets/slideshow/arrowleft.gif?r=96407"/></div>
		<div id="arrow_right"><img src="assets/slideshow/arrowright.gif?r=11652"/></div>
		<div id="theImages">
				<!-- Thumbnails -->
				<a href="#" onclick="showPreview('assets/slideshow/image1big.jpg?r=44722','1');return false"><img src="assets/slideshow/image1.jpg?r=97612" /></a>		
				<a href="#" onclick="showPreview('assets/slideshow/image2big.jpg?r=28812','2');return false"><img src="assets/slideshow/image2.jpg?r=34628" /></a>		
				<a href="#" onclick="showPreview('assets/slideshow/image3big.jpg?r=4527','3');return false"><img src="assets/slideshow/image3.jpg?r=35859" /></a>		
				<a href="#" onclick="showPreview('assets/slideshow/image4big.jpg?r=67495','4');return false"><img src="assets/slideshow/image4.jpg?r=67536" /></a>		
				<a href="#" onclick="showPreview('assets/slideshow/image5big.jpg?r=66955','5');return false"><img src="assets/slideshow/image5.jpg?r=86230" /></a>		
				<a href="#" onclick="showPreview('assets/slideshow/image6big.jpg?r=58368','6');return false"><img src="assets/slideshow/image6.jpg?r=27878" /></a>		
				<a href="#" onclick="showPreview('assets/slideshow/image7big.jpg?r=52475','7');return false"><img src="assets/slideshow/image7.jpg?r=70854" /></a>		
				<a href="#" onclick="showPreview('assets/slideshow/image8big.jpg?r=5258','8');return false"><img src="assets/slideshow/image8.jpg?r=2303" /></a>	
				<!-- End thumbnails -->
				
				<!-- Image captions -->	
				<div class="imageCaption">This is the caption of image number 1</div>
				<div class="imageCaption">This is the caption of image number 2</div>
				<div class="imageCaption">This is the caption of image number 3</div>
				<div class="imageCaption">This is the caption of image number 4</div>
				<div class="imageCaption">This is the caption of image number 5</div>
				<div class="imageCaption">This is the caption of image number 6</div>
				<div class="imageCaption">This is the caption of image number 7</div>
				<div class="imageCaption">This is the caption of image number 8</div>
				<!-- End image captions -->
				
				<div id="slideEnd"></div>
		</div>
	</div>
</div>

To this:

<div id="dhtmlgoodies_slideshow">
<div id="previewPane"><img src="assets/slideshow/image1big.jpg" /> <span>Loading image. Please wait</span>
<div id="largeImageCaption">This is the caption of image number 1</div>

</div>
<div id="galleryContainer">
<div id="arrow_left"><img src="assets/slideshow/arrowleft.gif" /></div>
<div id="arrow_right"><img src="assets/slideshow/arrowright.gif" /></div>
<div id="theImages"><a href="gallery/?stage=Live#"><img src="assets/slideshow/image1.jpg" /></a> <a href="gallery/?stage=Live#"><img src="assets/slideshow/image2.jpg" /></a> <a href="gallery/?stage=Live#"><img src="assets/slideshow/image3.jpg" /></a> <a href="gallery/?stage=Live#"><img src="assets/slideshow/image4.jpg" /></a> <a href="gallery/?stage=Live#"><img src="assets/slideshow/image5.jpg" /></a> <a href="gallery/?stage=Live#"><img src="assets/slideshow/image6.jpg" /></a> <a href="gallery/?stage=Live#"><img src="assets/slideshow/image7.jpg" /></a> <a href="gallery/?stage=Live#"><img src="assets/slideshow/image8.jpg" /></a>
<div class="imageCaption">This is the caption of image number 1</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>

<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>
<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>
</div>
</div>
</div>	
	
</div>
		</div>

In the first version, that I am inserting into the html field, pictures are there and everything seems ok, but when I save, then check the published site, some of it is missing, ie. the SlideEnd div and half of the pictures!

Sorry! Having one of those days.

Avatar
Carbon Crayon

Community Member, 598 Posts

7 July 2009 at 10:14pm

Are you doing this through the Content editor?!

You should be doing all this stuff in the template. The TinyMCE editor will strip out javascript code before it inserts any edits.

Also you really shouldn't be using inline javascript such as 'onclick', frameowrks like jQuery allow you to do anything without having to add any code into the markup.

Avatar
BelindaBJ

Community Member, 9 Posts

7 July 2009 at 10:40pm

I saw it done on one of the showcase websites a few days back:

Example: http://www.susannahconway.com/photography-stillness/

It looks like the code is exactly as in dhtmlgoodies

I emailed her, but I was asking about how she got the javascript to show. Not the html question. I might go back to css galleries... a bit more within my abilities.

Thanks for pointing me in the right direction, I really appreciate it.

Avatar
Carbon Crayon

Community Member, 598 Posts

7 July 2009 at 10:48pm

Your welcome :) jQuery is really easy to learn and has loads of plugins including galleries.

It really is worth putting a day or two into learning the basics because you can do so much with it in such a small amount of time, and if you know CSS then you are half way there as it uses the same selectors (id's classes etc).

Avatar
BelindaBJ

Community Member, 9 Posts

7 July 2009 at 10:56pm

Thanks, I've checked out the jQuery site before, and seen an amazing 12 year old boy give a lecture on it on youtube. Will get busy then.

Cheers,

Have a good night.

Avatar
Rishi

Community Member, 97 Posts

15 January 2010 at 1:10am

Hello
I am trying to achieve the same thing,can you please let me know the code

Avatar
zmall88

Community Member, 1 Post

22 September 2010 at 5:46pm

I stumbled across this thread while trying to achieve something similar loading MathJax (Math interpreter). I found this to be very useful and it solved my problem:

http://doc.silverstripe.org/requirements

and in particular:

http://doc.silverstripe.org/requirements#including_inside_template_files

Basically you should use requirements instead of the traditional way. Hope this helps.

IH

Go to Top