[Typo3] How to Create a slideshow where the individual images are replaceable content elements (for newbies)
dario
sirenovarado at yahoo.com
Fri Feb 25 19:14:34 CET 2005
Hi list
Hello,
Newbie here with hardly any object oriented programming knowledge.
I´m trying to get an existing website working in Typo3 so that users that have no programming knowledge can change its content.
So far everything has gone well...
Except for a page in the website that contains a javascript based slideshow. It takes 4 jpg images and returns a slideshow.
I need to implement something like that.
I was able to create 4 content elements for the individual pictures, but when typo3 generates the page, its not a slideshow, but just 4 dynamic pictures. The original web page has part of its javascript in a js file. I´m not sure if Typo3 reads it or not, because when I look at the generated page the head section has been replaced with Typo3 codes.
I did look at the extensions to see if there was something that did something similar, but these extensions have NO documentation or user manual and I guess they assume everyone knows A to Z about installing and running plugins. So I wasnt able to use any of them.
Actually if there was a front end plugin creating a slideshow gif, where the individual images where easily replaceable, would be great too.
Below I´m puttin:
1 the web page link,
2 the source code for the static html template I put in the fileadmin folder,
3 the typoscript I put in the setup field of the page template.
4 the source code of the page that typo3 generated, which is not a slideshow.
Thanks in advance-
*****************************************
1 the web page link:
http://micos.eusa.net/fotos_contents_1.html
*****************************************
2 the source code for the static html template I put in the fileadmin folder,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--###DOCUMENT_HEADER### begin-->
<title>Micos - Mi primer cole - Tour Fotográfico</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META name="Description" content="Micos. Mi primer cole, en El Viso, es una Escuela Infantil privada con educación para niños y niñas de 1 a 5 años. Instalaciones rehabilitadas según las normas de la Comunidad de Madrid.">
<META name="Keywords" content="Colegio, Escuela, Infantil, Privada, Religiosa, El Viso, Niños, 1 año, 5 años, Natación, Comedor, Actividades extraescolares ">
<META name="author" content="EUSA, eusa.net">
<META name="robots" content="index, follow">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<SCRIPT TYPE="text/javascript" SRC="js/slideshow.js">
</SCRIPT>
<SCRIPT TYPE="text/javascript">
<!--
SLIDES = new slideshow("SLIDES");
s = new slide();
s.src = "uploads/pics/1_02.jpg";
SLIDES.add_slide(s);
s = new slide();
s.src = "uploads/pics/2_02.jpg";
SLIDES.add_slide(s);
s = new slide();
s.src = "uploads/pics/3_01.jpg";
SLIDES.add_slide(s);
s = new slide();
s.src = "uploads/pics/4.jpg";
SLIDES.add_slide(s);
//-->
</SCRIPT>
<!--###DOCUMENT_HEADER### end-->
</head>
<body class="scrollbar" onLoad="SLIDES.restore_position(); SLIDES.update();"
onUnLoad="SLIDES.save_position()">
<!--###DOCUMENT_BODY### begin-->
<table width="540" border="0" cellpadding="0" cellspacing="0" class="text">
<tr>
<td><img src="img/espacio.gif" width="5" height="1"></td>
<td><img src="img/espacio.gif" width="530" height="1"></td>
<td><img src="img/espacio.gif" width="5" height="1"></td>
</tr>
<tr>
<td> </td>
<td align="center"><!--###fotos1### begin-->img/tour/zona_comun/1.jpg<!--###fotos1### end--><br>
<SCRIPT TYPE="text/javascript">
<!--
if (document.images)
{
SLIDES.set_image(document.images.SLIDESIMG);
SLIDES.set_textid("SLIDESTEXT"); // optional
SLIDES.update();
SLIDES.play(); //optional
}
//-->
</SCRIPT>
</td>
<td> </td>
</tr>
</table>
<!--###DOCUMENT_BODY### end-->
</body>
</html>
**********************************************************
3 the typoscript I put in the setup field of the page template.
SETUP FIELD:
config.admPanel = 1
page = PAGE
page.typeNum = 0
page.20= TEMPLATE
page.20 {
template = FILE
template.file = fileadmin/fotos_contents_1.html
# Select only the content between the <body>-tags
workOnSubpart = DOCUMENT_BODY
Substitute the ###fotos1### subpart with some example content:
subparts.fotos1 = IMG_RESOURCE
subparts.fotos1 < styles.content.get
}
}
*********************************************************
4 the source code of the page that typo3 generated, which is not a slideshow, but 4 dynamic pictures (which is good, but I need a slideshhow):
<!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--
This website is brought to you by TYPO3 - get.content.right
TYPO3 is a free open source Content Management Framework created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2004 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at http://www.typo3.com
-->
<title>_: fotos_contents_1</title>
<meta name="generator" content="TYPO3 3.7 CMS" />
<script type="text/javascript">
/*<![CDATA[*/
<!--
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
var msie4 = (browserName == "Microsoft Internet Explorer" && browserVer >= 4);
if ((browserName == "Netscape" && browserVer >= 3) || msie4 || browserName=="Konqueror") {version = "n3";} else {version = "n2";}
// Blurring links:
function blurLink(theObject) { //
if (msie4) {theObject.blur();}
}
// -->
/*]]>*/
</script>
</head>
<body bgcolor="#FFFFFF">
<table width="540" border="0" cellpadding="0" cellspacing="0" class="text">
<tr>
<td><img src="img/espacio.gif" width="5" height="1"></td>
<td><img src="img/espacio.gif" width="530" height="1"></td>
<td><img src="img/espacio.gif" width="5" height="1"></td>
</tr>
<tr>
<td> </td>
<td align="center">
<!-- CONTENT ELEMENT, uid:9/image [begin] -->
<a name="9"></a>
<!-- Image block: [begin] -->
<div align="center"><table width="327" border="0" cellspacing="0" cellpadding="0" class="imgtext-table"><tr><td colspan="1"><img src="clear.gif" width="327" height="1" alt="" /></td></tr><tr><td valign="top"><img src="uploads/pics/1_02.jpg" width="327" height="245" border="0" align="top" alt="" title="" /><br /><a href="#" onclick="vHWin=window.open('http://localhost/typo3/alt_doc.php?edit[tt_content][9]=edit&columnsOnly=image%20%5Bimageorient%7Cimagewidth%7Cimageheight%5D%2C%20%5Bimagecols%7Cimage_noRows%7Cimageborder%5D%2C%5Bimage_link%7Cimage_zoom%5D%2C%5Bimage_compression%7Cimage_effects%7Cimage_frames%5D%2Cimagecaption%5Bimagecaption_position%5D&noView=0&returnUrl=close.html','FEquickEditWindow','width=540,height=400,status=0,menubar=0,scrollbars=1,resizable=1');vHWin.focus();return false;"><img src="t3lib/gfx/edit_fe.gif" width="11" height="12" border="0" align="top" title="Edit images" class="frontEndEditIcons" alt="" title="" /></a></td></tr><tr><td colspan="1" align="center"><a href="#" onclick="vHWin=window.open('http://localhost/typo3/alt_doc.php?edit[tt_content][9]=edit&columnsOnly=imagecaption%5Bimagecaption_position%5D&noView=0&returnUrl=close.html','FEquickEditWindow','width=540,height=400,status=0,menubar=0,scrollbars=1,resizable=1');vHWin.focus();return false;"><img src="t3lib/gfx/edit_fe.gif" width="11" height="12" border="0" align="top" title="Edit image caption" class="frontEndEditIcons" alt="" title="" /></a></td></tr></table></div><img src="clear.gif" width="1" height="6" border="0" class="spacer-gif" alt="" title="" /><br />
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:9/image [end] -->
<!-- CONTENT ELEMENT, uid:10/image [begin] -->
<a name="10"></a>
<!-- Image block: [begin] -->
<img src="clear.gif" width="1" height="6" border="0" class="spacer-gif" alt="" title="" /><br /><div align="center"><table width="327" border="0" cellspacing="0" cellpadding="0" class="imgtext-table"><tr><td colspan="1"><img src="clear.gif" width="327" height="1" alt="" /></td></tr><tr><td valign="top"><img src="uploads/pics/2_02.jpg" width="327" height="245" border="0" align="top" alt="" title="" /><br /><a href="#" onclick="vHWin=window.open('http://localhost/typo3/alt_doc.php?edit[tt_content][10]=edit&columnsOnly=image%20%5Bimageorient%7Cimagewidth%7Cimageheight%5D%2C%20%5Bimagecols%7Cimage_noRows%7Cimageborder%5D%2C%5Bimage_link%7Cimage_zoom%5D%2C%5Bimage_compression%7Cimage_effects%7Cimage_frames%5D%2Cimagecaption%5Bimagecaption_position%5D&noView=0&returnUrl=close.html','FEquickEditWindow','width=540,height=400,status=0,menubar=0,scrollbars=1,resizable=1');vHWin.focus();return false;"><img src="t3lib/gfx/edit_fe.gif" width="11" height="12" border="0" align="top" title="Edit images" class="frontEndEditIcons" alt="" title="" /></a></td></tr><tr><td colspan="1" align="center"><a href="#" onclick="vHWin=window.open('http://localhost/typo3/alt_doc.php?edit[tt_content][10]=edit&columnsOnly=imagecaption%5Bimagecaption_position%5D&noView=0&returnUrl=close.html','FEquickEditWindow','width=540,height=400,status=0,menubar=0,scrollbars=1,resizable=1');vHWin.focus();return false;"><img src="t3lib/gfx/edit_fe.gif" width="11" height="12" border="0" align="top" title="Edit image caption" class="frontEndEditIcons" alt="" title="" /></a></td></tr></table></div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:10/image [end] -->
<!-- CONTENT ELEMENT, uid:11/image [begin] -->
<a name="11"></a>
<!-- Image block: [begin] -->
<img src="clear.gif" width="1" height="6" border="0" class="spacer-gif" alt="" title="" /><br /><div align="center"><table width="327" border="0" cellspacing="0" cellpadding="0" class="imgtext-table"><tr><td colspan="1"><img src="clear.gif" width="327" height="1" alt="" /></td></tr><tr><td valign="top"><img src="uploads/pics/3_01.jpg" width="327" height="245" border="0" align="top" alt="" title="" /><br /><a href="#" onclick="vHWin=window.open('http://localhost/typo3/alt_doc.php?edit[tt_content][11]=edit&columnsOnly=image%20%5Bimageorient%7Cimagewidth%7Cimageheight%5D%2C%20%5Bimagecols%7Cimage_noRows%7Cimageborder%5D%2C%5Bimage_link%7Cimage_zoom%5D%2C%5Bimage_compression%7Cimage_effects%7Cimage_frames%5D%2Cimagecaption%5Bimagecaption_position%5D&noView=0&returnUrl=close.html','FEquickEditWindow','width=540,height=400,status=0,menubar=0,scrollbars=1,resizable=1');vHWin.focus();return false;"><img src="t3lib/gfx/edit_fe.gif" width="11" height="12" border="0" align="top" title="Edit images" class="frontEndEditIcons" alt="" title="" /></a></td></tr><tr><td colspan="1" align="center"><a href="#" onclick="vHWin=window.open('http://localhost/typo3/alt_doc.php?edit[tt_content][11]=edit&columnsOnly=imagecaption%5Bimagecaption_position%5D&noView=0&returnUrl=close.html','FEquickEditWindow','width=540,height=400,status=0,menubar=0,scrollbars=1,resizable=1');vHWin.focus();return false;"><img src="t3lib/gfx/edit_fe.gif" width="11" height="12" border="0" align="top" title="Edit image caption" class="frontEndEditIcons" alt="" title="" /></a></td></tr></table></div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:11/image [end] -->
<!-- CONTENT ELEMENT, uid:12/image [begin] -->
<a name="12"></a>
<!-- Image block: [begin] -->
<img src="clear.gif" width="1" height="6" border="0" class="spacer-gif" alt="" title="" /><br /><div align="center"><table width="327" border="0" cellspacing="0" cellpadding="0" class="imgtext-table"><tr><td colspan="1"><img src="clear.gif" width="327" height="1" alt="" /></td></tr><tr><td valign="top"><img src="uploads/pics/4.jpg" width="327" height="245" border="0" align="top" alt="" title="" /><br /><a href="#" onclick="vHWin=window.open('http://localhost/typo3/alt_doc.php?edit[tt_content][12]=edit&columnsOnly=image%20%5Bimageorient%7Cimagewidth%7Cimageheight%5D%2C%20%5Bimagecols%7Cimage_noRows%7Cimageborder%5D%2C%5Bimage_link%7Cimage_zoom%5D%2C%5Bimage_compression%7Cimage_effects%7Cimage_frames%5D%2Cimagecaption%5Bimagecaption_position%5D&noView=0&returnUrl=close.html','FEquickEditWindow','width=540,height=400,status=0,menubar=0,scrollbars=1,resizable=1');vHWin.focus();return false;"><img src="t3lib/gfx/edit_fe.gif" width="11" height="12" border="0" align="top" title="Edit images" class="frontEndEditIcons" alt="" title="" /></a></td></tr><tr><td colspan="1" align="center"><a href="#" onclick="vHWin=window.open('http://localhost/typo3/alt_doc.php?edit[tt_content][12]=edit&columnsOnly=imagecaption%5Bimagecaption_position%5D&noView=0&returnUrl=close.html','FEquickEditWindow','width=540,height=400,status=0,menubar=0,scrollbars=1,resizable=1');vHWin.focus();return false;"><img src="t3lib/gfx/edit_fe.gif" width="11" height="12" border="0" align="top" title="Edit image caption" class="frontEndEditIcons" alt="" title="" /></a></td></tr></table></div>
<!-- Image block: [end] -->
<!-- CONTENT ELEMENT, uid:12/image [end] -->
<br>
<SCRIPT TYPE="text/javascript">
<!--
if (document.images)
{
SLIDES.set_image(document.images.SLIDESIMG);
SLIDES.set_textid("SLIDESTEXT"); // optional
SLIDES.update();
SLIDES.play(); //optional
}
//-->
</SCRIPT>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
- dario (dariospain)
-----------------------
The mailing list archive is found here:
http://typo3.org/documentation/mailing-lists/english-main-list-archive/
More information about the TYPO3-english
mailing list