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.

Customising the CMS

Inserting custom javascript


Reply

16 Posts   6538 Views

Avatar
BelindaBJ

7 July 2009 at 9:17pm Community Member, 9 Posts

Cheers, downloading firebug now.

Thanks for your help guys!

Will check out my code now.

Avatar
BelindaBJ

7 July 2009 at 10:05pm Community Member, 9 Posts

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
Aram

7 July 2009 at 10:14pm Community Member, 598 Posts

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

7 July 2009 at 10:40pm Community Member, 9 Posts

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

Example: [url]http://www.susannahconway.com/photography-stillness/[/url]

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
Aram

7 July 2009 at 10:48pm Community Member, 598 Posts

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

7 July 2009 at 10:56pm Community Member, 9 Posts

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

15 January 2010 at 1:10am Community Member, 97 Posts

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

Avatar
zmall88

22 September 2010 at 5:46pm Community Member, 1 Post

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