Hallo zusammen!
Also ich habe nun alle Threads durchgelesen und alles mögliche ausprobiert, aber irgendwie will die Fancybox nicht so wie ich^^
Hochgeladen habe ich alles. Meine Dateien sehen wie folgt aus:
Index htm des Designs
<!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">
<!-- Maretz.eu - Free Ilch Clan and CommUnity Templates -->
<head><meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<style type="text/css">
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: fixed;
top: 10%;
left: 40%;
width: 300px;
height: 400px;
padding: 3px;
background-color: #ffffff;
border: 2px solid #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #2f2f2f;
z-index:1002;
overflow: auto;
}
</style>
<link rel="stylesheet" type="text/css" href="include/extras/fancybox/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="include/includes/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="include/extras/fancybox/jquery.fancybox-1.2.1.pack.js"></script>
<script type="text/javascript" src="include/extras/fancybox/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table#galimages a").fancybox(
{
'zoomSpeedIn': 800,
'zoomSpeedOut': 500,
'zoomSpeedChange': 800,
'zoomOpacity': 0.5,
'overlayOpacity': 0.5,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack',
'overlayShow': true
}
);
$("div#bbvideo a").fancybox(
{
'zoomSpeedIn': 800,
'zoomSpeedOut': 500,
'zoomSpeedChange': 800,
'zoomOpacity': 0.5,
'overlayOpacity': 0.5,
'overlayShow': true
}
);
});
</script>
<link rel="SHORTCUT ICON" href="include/images/favicon.ico" />
<title>{TITLE}</title>
<link rel="stylesheet" href="include/designs/mar_Elite/style_elite.css" type="text/css" title="mar_Elite" media="screen, projection" />
<link href="include/designs/mar_Elite/dropdown.vertical.css" media="screen" rel="stylesheet" type="text/css" />
<link href="include/designs/mar_Elite/default.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="include/designs/mar_Elite/boxswitch/tabcontent.js">
/***********************************************
* Tab Content script v2.2 and Mouseover Tabs Menu- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
***********************************************/
</script>
</head><body>
<script type="text/javascript" src="snowflakes.js"></script>
<div id="ts_pop" style="margin-left:520px;left:50%;position:absolute;top:234px;" >
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<img src="include/images/icons/ts_logo.png" border="0" alt="Teamspeak" onmouseover="this.src='include/images/icons/ts_logo_h.png';" onmouseout="this.src='include/images/icons/ts_logo.png'" border="0"/></a></div>
<div href="https://www.facebook.com/legrafikcommunity" style="margin-left:520px;left:50%;position:absolute;top:336px;" >
<a href = "https://www.facebook.com/legrafikcommunity" target="_blank">
<img src="include/images/icons/fb.png" border="0" alt="Teamspeak" onmouseover="this.src='include/images/icons/fb_h.png';" onmouseout="this.src='include/images/icons/fb.png'" border="0"/></a></div>
<!-- Vorsicht bei Änderungen!Dies kann zu Fehldarstellungen führen. -->
<div id="seite"><a name="anfang" id="anfang"></a>
<div id="header"></div>
<div id="social_icons"><div id="social_icons_platz"><a class="ts" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"" title=" Teamspeak"></a><a class="server" href = "javascript:void(0)" onclick = "document.getElementById('light1').style.display='block';document.getElementById('fade1').style.display='block'"" title="GameServer"></a><a class="facebook" href="http://www.facebook.com/Maretz.eu" title="Besucht uns auf facebook" target="_blank"></a></div></div>
<div id="navigation"><div id="navigation_platz">{_boxes_top_navigation_elite}</div></div>
<div id="infobox"><div id="one">
<div id="navigation_info"><ul id="countrytabs1" class="shadetabs">
<li><a href="#" rel="platz_box1" class="selected" title="User Forum">User Forum</a></li>
<li><a href="#" rel="platz_box2" title="letzte News">Last News</a></li>
<li><a href="#" rel="platz_box3" title="Forumeinträge mit den meisten Antworten">Most Responded</a></li>
<li><a href="#" rel="platz_box4" title="New Downloads">New Downloads</a></li></ul></div>
<div id="inhalt_info">
<div id="platz_box1" class="tabcontent">{_boxes_lastforum_elite}</div>
<div id="platz_box2" class="tabcontent">{_boxes_lastnews_elite}</div>
<div id="platz_box3" class="tabcontent">{_boxes_toptopic_elite}</div>
<div id="platz_box4" class="tabcontent">{_boxes_download}</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs1")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script></div>
<div id="login_user">{_boxes_login_elite}</div></div></div><div id="abstand_one"></div>
<br style="clear: both;"/><div id="content-bg"><div id="left_col">
{_list_menunr1@<div id="menu_heading_left" ><div id="menu_heading_left_font">%1</div></div><div id="menuleftmiddle" class="menuone">%2</div><div id="menuleftbottom"></div>}</div>
<div id="right_col"></div>
<div id="head_content"><div class="hmenustyle_ov">{HMENU}</div></div><div id="main_col"><div id="main_colin">{EXPLODE}</div><div id="foot_content"></div></div>
<br style="clear: both;" />
<div id="footer">{_boxes_allianzelite}<br/><span class="foot_font"><a class="foot_font_a" href="index.php?impressum">All Rights by {SITENAME}</a> | <a class="foot_font_a" href="http://www.maretz.eu" target="_blank">Design by Maretz.eu</a> | <a class="foot_font_a" href="http://www.ilch.de" target="_blank">CMS by Ilch.de</a></span><a class="nach_oben" href="#anfang" title="Top Page"></a></div>
<div id="end_platz"></div>
</div></div>
<div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="closed" title="Fenster schließen"></a><br/><br/>
<!-- Anfang TS Code -->
<div id="ts3viewer_1015265" style="width:; background-color:;"> </div>
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=1015265&text=000000&text_size=12&text_family=1&js=1&text_s_color=ff0000&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=525284&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=525284&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=525284&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=459cff&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=525284&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 1015265, 100);
-->
</script>
<!-- Ende TS Code -->
</div><div id="fade" class="black_overlay"></div>
<div id="light1" class="white_content1"><a href = "javascript:void(0)" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade1').style.display='none'" class="closed" title="Fenster schließen"></a><br/><br/>
<!-- Anfang Gamserver Code -->
{_boxes_gameserver}
<!-- Ende Gameserver Code -->
</div><div id="fade1" class="black_overlay1"></div>
</div></div>
<div id="light" class="white_content"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><br>Close<br><br></a>
<!-- Anfang TS Code -->
HIER TS CODE REIN
<!-- Ende TS Code -->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><br>Close</a></div>
<div id="fade" class="black_overlay"></div>
</body></html>
<!-- {__list_hmenupoint@<a %1 class="menu" href="%2">%3</a><br>}
{_list_hmenupoint@<a target="%1" class="menu" href="%2">%3</a>|</li>|<br />}
{_list_hmenubegi@}
{_list_hmenuende@}
{_list_vmenupoint@<a target="%1" class="menu" title="%3" href="%2">%3</a><br/>}
{_list_vmenubegi@}
{_list_vmenuende@}//-->
BBcode Global.js
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
{
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
addEvent(window, "load", ResizeBBCodeImages);
//Funktion die alle Bilder des BBCodes der Funktion SetSize übergibt
function ResizeBBCodeImages() {
imgs = document.getElementsByTagName("img");
for (ti=0;ti<imgs.length;ti++) {
if (imgs[ti].className.indexOf("bbcode_image") != -1) {
SetSize(imgs[ti]);
}
}
}
//Funktion zum Ändern der Bildgröße für zu große Bilder
function SetSize(img){
var w = img.width;
var h = img.height;
var toChange = false;
if (w>bbcodemaximagewidth) {
h = bbcodemaximagewidth * h / w;
w = bbcodemaximagewidth;
toChange = true;
}
if (h>bbcodemaximageheight) {
w = bbcodemaximageheight * w / h;
h = bbcodemaximageheight;
toChange = true;
}
if (toChange) {
var src = img.getAttribute('src');
if ( img.parentNode.nodeName.toLowerCase() == 'a' ) {
img.setAttribute('width',w);
img.setAttribute('height',h);
} else {
var ersatz = document.createElement('a');
ersatz.setAttribute('href',src);
var newImg = document.createElement('img');
newImg.setAttribute('src',src);
newImg.setAttribute('width',w);
newImg.setAttribute('height',h);
newImg.setAttribute('border','0');
newImg.setAttribute('style',img.getAttribute('style',0));
ersatz.appendChild(newImg);
img.parentNode.replaceChild(ersatz,img);
$(ersatz).fancybox();
}
}
}
//Funktion für BBCode Klapptext
function Klapptext(str) {
var KlappText = document.getElementById('layer_'+str);
var KlappBild = document.getElementById('image_'+str);
var medientuner_minus= "include/images/icons/minus.gif", medientuner_plus="include/images/icons/plus.gif";
if (KlappText.style.display == 'none') {
KlappText.style.display = 'block';
KlappBild.src = medientuner_minus;
} else {
KlappText.style.display = 'none';
KlappBild.src = medientuner_plus;
}
}
Ich bräuchte die Funktion der Fancybox nur bei den News und im Forum.
Danke schon mal im Vorraus!