Cheers, downloading firebug now.
Thanks for your help guys!
Will check out my code now.
This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.
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.
Cheers, downloading firebug now.
Thanks for your help guys!
Will check out my code now.
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.
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.
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.
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).
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.
Hello
I am trying to achieve the same thing,can you please let me know the code
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