Hallo alle Zusammen,
da ich die Extensions von Shadowbox und Fanybox installiert habe möchte ich jetzt das Bilder per Klick sich mit dem Effekt "lightbox" öffnen.
Hier mein Quellcode:
//Bilder-------------------------------------------------------
$sql_share_pic='SELECT * FROM `_picture` WHERE `deleted` =0 AND `hidden` =0';
$res_share_pic=$GLOBALS['TYPO3_DB']->sql_query($sql_share_pic);
//Share-Items
$anz_picture=0;
while ($row_share_pic= $GLOBALS['TYPO3_DB']->sql_fetch_assoc($res_share_pic)){
if($anz_picture%4 == 0){
$content_picture.='
<div class="media_element">
<ul>';
}
$content_picture.='
<li class="view view-tenth"><img src="fileadmin/dateien/Share-Idea/Picture/thumbnails/'.$row_share_pic[picture].'" alt="Bild" /><div class="mask"><a href="fileadmin/dateien/Share-Idea/Picture/'.$row_share_pic[picture].'" class="detail">Lorem ipsum dolor<cite>Max Mustermann, 15</cite></a></div></li>';
if($anz_picture%4 == 3){
$content_picture.='
</ul>
</div>';
}
$anz_picture++;
}
if($anz_picture%4 != 0){
$content_picture.='
</ul>
</div>';
}
//----------------------------------------------------------------------------------------
//-------------------------- AUSGABE ------------------------------
//----------------------------------------------------------------------------------------
//Bilder-------------------------------------------------------
$content.=' </div>
</div>
<div class="media-photo">
<div class="fotografiere"><a href=""><span></span>Fotografiere deine Idee</a></div>
<div class="nav_media_slider">
<div class="prev_media_slider">←</div>
<div class="next_media_slider"> →</div>
</div>
<div class="media_slider_elements" style="width:'.(ceil($anz_picture/4)*400).'px">';
$content.=$content_picture;
$content.='
</div>
</div>';
return $this->pi_wrapInBaseClass($content);
}
}
if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/_share_idea/pi3/class.tx_shareidea_pi3.php']) {
include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/_share_idea/pi3/class.tx_shareidea_pi3.php']);
}
?>
Meine JS Header:
<script src="fileadmin/templates/js/jquery-1.7.1.min.js"></script>
<script src="fileadmin/templates/js/jquery-ui-1.8.16.custon.min.js"></script>
<script src="fileadmin/templates/js/jquery.easing.1.3.js"></script>
<script src="fileadmin/templates/js/jquery.scrollto.min.js"></script>
<script src="fileadmin/templates/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="fileadmin/templates/js/jquery.fancybox-1.3.4.pack.js"></script>
<script src="fileadmin/templates/js/head.js"></script>
<script src="fileadmin/templates/js/swfobject.js"></script>
<script src="fileadmin/templates/js/load_flash.js"></script>
<script type="text/javascript" src="http://fast.fonts.com/jsapi/b40a02b3-05e1-4b9e-a71f-f1b65525b52b.js"></script>
<script src="fileadmin/templates/js/vendor/jquery.ui.widget.js"></script>
<script src="fileadmin/templates/js/jquery.iframe-transport.js"></script>
<script src="fileadmin/templates/js/jquery.fileupload.js"></script>
<script src="fileadmin/templates/js/iscroll.js"></script>
<script type="text/javascript" src="typo3temp/pmkshadowbox/base-de-DE-img/shadowbox.js"></script><link type="text/css" media="all" rel="stylesheet" href="typo3temp/pmkshadowbox/base-de-DE-img/shadowbox.css" /><script type="text/javascript">
/* <![CDATA[ */ function shadowBoxInit() {
Shadowbox.init({
animate: 1,
animateFade: 1,
animSequence: 'sync',
autoplayMovies: 1,
continuous: 0,
counterLimit: 10,
counterType: 'skip',
displayCounter: 1,
displayNav: 1,
enableKeys: 1,
fadeDuration: 0.1,
flashParams: {bgcolor:"#000000",allowfullscreen:"true"},
flashVars: {},
flashVersion: '9.0.0',
handleOversize: 'resize',
handleUnsupported: 'link',
initialHeight: 160,
initialWidth: 320,
modal: 0,
onChange: function() {},
onClose: function() {},
onFinish: function() {},
onOpen: function() {},
overlayColor: '#000000',
overlayOpacity: 0.7,
resizeDuration: 0.1,
showOverlay: 1,
showMovieControls: 1,
skipSetup: 0,
slideshowDelay: 0,
viewportPadding: 20,
preserveAspectWhileResizing: 1
});
}
Shadowbox.path = 'typo3temp/pmkshadowbox/base-de-DE-img/';shadowBoxInit();;/* ]]> */
</script>
Ich weißt das ich bei der verlinkung <a rel="shadowbox;title=Titel für Shadowbox".... reinstetzen muss. Aber wie soll ich das im Quellcode umsetzen?
Bin noch neu in Typo3!
Gruss Davis