Scriptacolous script without <style> tag in TinyMCE

Question

I have found this simple Scriptacolous script for a slideshow. I have a problem, though: to insert it in the page, I have to use TinyMCE editor (no other choice). Now, when I save the code, TinyMCE cuts off the style portion, so the script will not work. Is there a way to get the same result without using the style tag? Maybe javascript only?

Thanks for your attention. Alessandro

<head>
<style>
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
</head>

<body>

<div class="fadein">
<img src="http://image1.jpg">
<img src="http://image2.jpg">
<img src="http://image3.jpg">
</div>

<script>
setInterval(function(){
var imgs = $$('.fadein img'), 
visible = imgs.findAll(function(img){ return img.visible(); });
if(visible.length>1) visible.last().fade({ duration: .3 });
else imgs.last().appear({ duration: .3, 
  afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
}, 3000);
</script>
</body>

Answer 1

Assuming this is all you need to style, you can just add the attributes manually

<div style="position:relative; height:332px; width:500px;" class="fadein">
<img style="position:absolute; left:0; top:0;" src="http://image1.jpg">
<img style="position:absolute; left:0; top:0;" src="http://image2.jpg">
<img style="position:absolute; left:0; top:0;" src="http://image3.jpg">
</div>

Scriptacolous script without <style> tag in TinyMCE

Question

1 answers

solution1
0 2013-10-12 10:56:19

Scriptacolous script without <style> tag in TinyMCE

Question

1 answers

solution1 0 2013-10-12 10:56:19

solution1
0 2013-10-12 10:56:19