Jump to:

5539 Posts in 1738 Topics by 1224 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Inserting custom javascript

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

Page: 1 2
Go to End
Author Topic: 6448 Views
  • BelindaBJ
    Avatar
    Community Member
    9 Posts

    Re: Inserting custom javascript Link to this post

    Cheers, downloading firebug now.

    Thanks for your help guys!

    Will check out my code now.

  • BelindaBJ
    Avatar
    Community Member
    9 Posts

    Re: Inserting custom javascript Link to this post

    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.

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Inserting custom javascript Link to this post

    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.

  • BelindaBJ
    Avatar
    Community Member
    9 Posts

    Re: Inserting custom javascript Link to this post

    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.

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Inserting custom javascript Link to this post

    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).

  • BelindaBJ
    Avatar
    Community Member
    9 Posts

    Re: Inserting custom javascript Link to this post

    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.

  • Rishi
    Avatar
    Community Member
    97 Posts

    Re: Inserting custom javascript Link to this post

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

  • zmall88
    Avatar
    Community Member
    1 Post

    Re: Inserting custom javascript Link to this 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

    6448 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.