-
Imagemap und Lightbox
Hallo zusammen,
ich muss mich gleich mal entschuldigen, ich bin wirklich kein Programmierer und hoffe das meine Frage wenigstens einigermaßen berechtigt ist.
Ich versuche in eine Imagemap eine Lightbox zu bauen. Sprich: ich möchte wenn, dass wenn man an bestimmte Stellen des Bildes klickt sich dann die Lightbox öffnet und dann das passende Bild anzeigt.
Die imagemap funktioniert wunderbar nur schaffe ich es einfach nicht meinem Code zu sagen das er das Bild nicht öffnen soll sondern die lightbox mit dem Bild.
Mein Code sieht wie folgt aus:
PHP-Code:
<p><a>
<img usemap="#SL-Klasse" src="tl_files/multimedia/galerie/pictures/SL 231 - Data/SL_MAP.jpg" border="0" alt="Karte" width="860" height="410" /></a>
<map name="SL-KLasse">
<area title="Frontschürze" shape="poly" coords="54,190,88,226,122,225,106,257,103,303,40,299,28,283,23,264,24,245,30,200" href="tl_files/multimedia/galerie/pictures/SL 231 - Data/Frontschuerze_mit PTS.jpg" alt="Frontschürze" /> /[gt]
<area title="Kotflügel vorne" shape="poly" coords="101,190,201,176,319,170,304,195,312,275,312,282,242,284,230,244,204,215,169,206,123,226,89,227,78,218" href="tl_files/multimedia/galerie/pictures/SL 231 - Data/Kotfluegel_vorne.jpg" alt="Kotflügel vorne" />
<area title="Seitenschweller" shape="poly" coords="241,284,499,274,533,245,584,242,578,265,576,301,241,306" href="tl_files/multimedia/galerie/pictures/SL 231 - Data/Seitenschweller.jpg" alt="Seitenschweller" />
<area title="Kotflügel hinten" shape="poly" coords="534,244,572,179,745,178,779,205,736,207,694,218,649,200,663,216,585,242" href="tl_files/multimedia/galerie/pictures/SL 231 - Data/Kotfluegel_hinten.jpg" alt="Kotflügel hinten" />
<area title="Hecklippe" shape="poly" coords="767,162,789,168,802,146,789,135,769,145" href="tl_files/multimedia/galerie/pictures/SL 231 - Data/Heckanbaulippe.jpg" alt="Hecklippe" />
<area title="Heckschürze" shape="poly" coords="694,218,732,207,806,204,820,219,818,256,808,278,717,291,712,249" href="tl_files/multimedia/galerie/pictures/SL 231 - Data/Heckschuerze.jpg" alt="Heckschürze" />
</map>
</p>
Währe echt dankbar über eure Hilfe, ich bin so langsam am verzweifeln :)
Vielen Dank
Gruß
-
moo_lightbox4ward.html5 Template:
PHP-Code:
<?php
/*******************/
/** Configuration **/
/*******************/
/* Customize Style
* You can also set this to blank and include the style in any other way.
* Probalby with the TL-Style-Editor
*/
// $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/mediaboxAdvWhite.css|screen';
// $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/mediaboxAdvBlack.css|screen';
/* Mediabox Configs */
$GLOBALS['Lightbox4ward']['options']['overlayOpacity'] = 0.8;
$GLOBALS['Lightbox4ward']['options']['resizeDuration'] = 500;
$GLOBALS['Lightbox4ward']['options']['initialWidth'] = 180;
$GLOBALS['Lightbox4ward']['options']['initialHeight'] = 100;
$GLOBALS['Lightbox4ward']['options']['resizeTransition'] = 'Fx.Transitions.Quint.easeInOut';
$GLOBALS['Lightbox4ward']['options']['noFlashMessage'] = "'".$GLOBALS['TL_LANG']['lightbox4ward']['noFlashMessage']."'";
$GLOBALS['Lightbox4ward']['options']['closeLbl'] = "'".$GLOBALS['TL_LANG']['lightbox4ward']['closeLbl']."'";
$GLOBALS['Lightbox4ward']['options']['nextLbl'] = "'".$GLOBALS['TL_LANG']['lightbox4ward']['nextLbl']."'";
$GLOBALS['Lightbox4ward']['options']['prevLbl'] = "'".$GLOBALS['TL_LANG']['lightbox4ward']['prevLbl']."'";
/****************/
/** CONFIG END **/
/****************/
// Add mediabox default style sheet
if(!isset($GLOBALS['TL_CSS']['lightbox4ward_css'])) $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/4wardmedia.css|screen';
// Compile Options
(preg_match('~(http[s]?://[^/]+).*~',$this->Environment->base,$erg)) ? $host = $erg[1] : $host='';
$lightbox4wardOptions = 'hostName:"'.$host.'",';
if(isset($GLOBALS['Lightbox4ward']['options']) && is_array($GLOBALS['Lightbox4ward']['options']) && count($GLOBALS['Lightbox4ward']['options']) > 0){
foreach($GLOBALS['Lightbox4ward']['options'] as $option => $value){
$lightbox4wardOptions .= $option.':'.$value.',';
}
}
$lightbox4wardOptions = substr($lightbox4wardOptions,0,-1);
?>
<script src="system/modules/lightbox4ward/html/mediaboxAdv_lightbox4ward.js"></script>
<script>
<!--//--><![CDATA[//><!--
Mediabox.customOptions = {<?php echo $lightbox4wardOptions; ?>};
Mediabox.scanPage = function() {
var links = $$("a, area").filter(function(el)
{
return el.getAttribute('data-lightbox') != null;
});
$$(links).mediabox(Mediabox.customOptions,
function(el)
{
return [el.href, el.title, el.getAttribute('data-lightbox')];
},
function(el)
{
var data = this.getAttribute('data-lightbox').split(' ');
return (this == el) || el.getAttribute('data-lightbox').match(data[0]);
}
);
};
window.addEvent("domready", Mediabox.scanPage);
//--><!]]>
</script>
PS: ungetestet :D
-
Vielen Dank!!!!
jetzt habe ich dennoch ein kleines Problem.
unter Template finde ich nur die Datei moo_lightbox4ward.tpl
mit dem Inhalt:
PHP-Code:
<?php
/*******************/
/** Configuration **/
/*******************/
/* Customize Style
* You can also set this to blank and include the style in any other way.
* Probalby with the TL-Style-Editor
*/
$GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/mediaboxAdvWhite.css|screen';
// $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/mediaboxAdvBlack.css|screen';
/* Mediabox Configs */
$GLOBALS['Lightbox4ward']['options']['overlayOpacity'] = 0.8;
$GLOBALS['Lightbox4ward']['options']['resizeDuration'] = 800;
$GLOBALS['Lightbox4ward']['options']['initialWidth'] = 180;
$GLOBALS['Lightbox4ward']['options']['initialHeight'] = 100;
$GLOBALS['Lightbox4ward']['options']['resizeTransition'] = 'Fx.Transitions.Quart.easeInOut';
$GLOBALS['Lightbox4ward']['options']['noFlashMessage'] = "'".$GLOBALS['TL_LANG']['lightbox4ward']['noFlashMessage']."'";
/****************/
/** CONFIG END **/
/****************/
// Add mediabox default style sheet
if(!isset($GLOBALS['TL_CSS']['lightbox4ward_css'])) $GLOBALS['TL_CSS']['lightbox4ward_css'] = 'system/modules/lightbox4ward/html/css/4wardmedia.css|screen';
// Compile Options
(preg_match('~(http[s]?://[^/]+).*~',$this->Environment->base,$erg)) ? $host = $erg[1] : $host='';
$lightbox4wardOptions = 'hostName:"'.$host.'",';
if(isset($GLOBALS['Lightbox4ward']['options']) && is_array($GLOBALS['Lightbox4ward']['options']) && count($GLOBALS['Lightbox4ward']['options']) > 0){
foreach($GLOBALS['Lightbox4ward']['options'] as $option => $value){
$lightbox4wardOptions .= $option.':'.$value.',';
}
}
$lightbox4wardOptions = substr($lightbox4wardOptions,0,-1);
?>
<script type="text/javascript" src="system/modules/lightbox4ward/html/mediaboxAdv_lightbox4ward.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
Mediabox.customOptions = {<?php echo $lightbox4wardOptions; ?>};
Mediabox.scanPage = function() {
var links = $$("a").filter(function(el) {
return el.rel && el.rel.test(/^(lightbox|mediabox)/i);
});
$$(links).mediabox(Mediabox.customOptions, null, function(el) {
var rel0 = this.rel.replace(/[[]|]/gi," ");
var relsize = rel0.split(" ");
return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
});
};
window.addEvent("domready", Mediabox.scanPage);
//--><!]]>
</script>
Muss ich diesen Code ändern? Wie komme ich an die Datei moo_lightbox4ward.html5?
Vielen Dank schon mal im Voraus. :)
Viele Grüße
-
