[Joomla!] jQuery bzw Supersized 2.0 integrieren

smacks · 01.01.2011

Hey Leute,
st mal ein frohes, neues Jahr allen

Bin gerade dabei, meine erste Seite mit Joomla umzusetzen. Template selbst erstellt per HTML und CSS. Als statische Seite klappt alles prima. Zusätzlich habe ich einen automatisch skalirten Hintergrund eingefügt per Supersized 2.0.

In Joomla möchte das ganze allerdings dann nimmer so, wie ich will ^^
Alle Elemente (Header, Content-Bereich etc.) werden problemlos angezeigt, jedoch nicht das Hintergrundfoto. Dieses wird allerdings auch nicht angezeigt, wenn ich es schlicht in einen der div-Container einfüge (per img-tag). Pfade habe ich mehrfach überprüft, sollte ich da keinen grundlegenden Fehler gemacht haben, müssten die stimmen.

Hier mal der Code:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php
echo $this->template ?>/css/template.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="supersized.2.0.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$('#supersize').supersized();
});
/* ]]> */
</script>

</head>
<body>
<div id="supersize">
<img src="images/bg.jpg" /> <----das Hintergrundfoto
</div>
<div id="wrapper">
<div id="header"></div>
<div class="clear"></div>
<div id="navhor"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="news"></div>
<div class="clear"></div>
<div id="footer"></div>
</div>
</body>
</html>

template.css

@charset "utf-8";
/* CSS Document */

* {
margin:0;
padding:0;
outline:none;
border:0;

}

body {
font-family: Myriad Pro, Arial, Helvetica, sans-serif;
font-size:14px;

}

#supersize {
position:fixed;
}

#supersize img, #supersize a {
height:100%;
width:100%;
position:absolute;
z-index: 0;
}

.clear {
clear:both;
}

#wrapper {
position: absolute;
left: 50%;
width: 1000px;
margin-left: -486px; /* negative Hälfte von width:972px */
top: 0;
}

#header {
background:url(../images/header.png) top no-repeat;
width:960px;
height:245px;
margin:auto;
position:relative;
z-index: 1;
float:left;

}

#navhor {
font-size:1.5em;
color:#FFF;
text-align:center;
position:relative;
z-index:1;

}

#nav {
background:url(../images/nav.png) no-repeat ;
width:166px;
height:559px;
margin:auto;
position:relative;
z-index:1;
float:left;

}

#content {
background:url(../images/content.png) no-repeat;
width:680px;
height:704px;
margin:auto;
position:relative;
z-index:1;
float:left;

}

#news {
background:url(../images/news.png) no-repeat;
width:143px;
height:574px;
margin:auto;
position:relative;
z-index:1;
float:left;
}

#footer {
background:url(../images/footer.png) no-repeat;
width:680px;
height:65px;
margin:auto;
position:relative;
z-index:1;
}

Woran mags liegen? Wahrscheinlich überseh ich nur irgend eine Kleinigkeit :/ ^^

freundliche Grüße,
smacks

Herrschel · 02.01.2011

AW: [Joomla!] jQuery bzw Supersized 2.0 integrieren

Wo befindet sich das Bild den? Tatsächlich im Root Ordner Images? Hilft wahrscheinlich mal per Browser aufs hintergrundbild mit rechtsklick sich den Pfad anzeigen lassen.

Denke es liegt dran das Du den falschen Pfad angegeben hast. Du hast es bestimmt im Template Root abgelegt, oder?

In der css datei sieht man das sich die bilder aus dem Template Root Verzeichnis geholt werden (../images/header.png)

Das würde ich mal checken.

Herrschel · 02.01.2011

AW: [Joomla!] jQuery bzw Supersized 2.0 integrieren

Wenn das so ist musst du deinen Code etwa so abändern.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php
echo $this->template ?>/css/template.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="supersized.2.0.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$('#supersize').supersized();
});
/* ]]> */
</script>

</head>
<body>
<div id="supersize">
<img src="<?php echo $this->baseurl ?>/templates/<?php
echo $this->template ?>/images/bg.jpg" /> <----das Hintergrundfoto
</div>
<div id="wrapper">
<div id="header"></div>
<div class="clear"></div>
<div id="navhor"></div>
<div id="nav"></div>
<div id="content"></div>
<div id="news"></div>
<div class="clear"></div>
<div id="footer"></div>
</div>
</body>
</html>

Damit Joomla auch merkt das sich das Hintergrundbild im Template Ordner befindet...

Gruß, der Mark.

smacks · 02.01.2011

AW: [Joomla!] jQuery bzw Supersized 2.0 integrieren

Also mit der php-Erweiterung wird das Bild immerhin schon als Hintergrund angezeigt. Allerdings nur außerhalb des <div id="supersize">-tags -.- In den anderen div-tags wird es auch angezeigt, wenn ich es dort platziere.

Kann Joomla denn überhaupt so wie im Code mit jQuery bzw Javascripten umgehen?

Die (statischen) Pfade stimmen 100%, natürlich muss ich in der CSS-Datei vom Rootverzeichnis aus auf den Ordner "Image" verweisen, die CSS-Datei liegt ja im Ordner "CSS"

Wenn es an keiner Inkompatibilität mit Joomla liegt bzw falsche Anwendung, dann wird es wohl mit der CSS-DAtei zusammenhängen, mal sehn ~.~

Wenn jemand Tips hat, ich wäre überaus Dankbar

smacks · 02.01.2011

AW: [Joomla!] jQuery bzw Supersized 2.0 integrieren

Hehe Problem gelöst

Irgendetwas schien ein Problem damit zu haben, dass der div-container "supersize" position:fixed; enthielt. Allerdings entsteht das Problem nicht, wenn ich die position von dem img-tag des "supersize"-containers auf "fixed" setze.

Funktioniert also. Warum weiß ich allerdings nicht xD

Jemand eine Erklärung? Wichtig ist, dass es nur bei der index.php Datei passiert, nicht bei der index.html!

sgabardi · 16.01.2011

AW: [Joomla!] jQuery bzw Supersized 2.0 integrieren

Du musst den jQuery noConflict Modus nutzen, denn Joomla! nutzt als Standard mootools.

Darin könnte auch dein Problem liegen, dass das Bild zwar geladen wird, jedoch nicht aber der Supersized Effekt schlägt.

Ausserdem würde ich dir empfehlen, die Template-Grundlagen von Joomla! anszusehen, denn, zumindest laut dem Codeteil oben, lädst du den Head nicht aus Joomla!.
Das wird zum Problem, da wichtige Seiteninhalte für Erweiterungen nicht geladen werden können.