5102 Posts in 1520 Topics by 1116 members
| Go to End | ||
| Author | Topic: | 4782 Views |
-
Re: Inserting custom javascript
7 July 2009 at 9:17pm
Cheers, downloading firebug now.
Thanks for your help guys!
Will check out my code now.
-
Re: Inserting custom javascript
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.
-
Re: Inserting custom javascript
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.
-
Re: Inserting custom javascript
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.
-
Re: Inserting custom javascript
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).
-
Re: Inserting custom javascript
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.
-
Re: Inserting custom javascript
15 January 2010 at 1:10am
Hello
I am trying to achieve the same thing,can you please let me know the code -
Re: Inserting custom javascript
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
| 4782 Views | ||
| Go to Top |
