dbarthel
Lounge-Member
Hallo, ich habe mal wieder einige Fragen.
Und zwar möchte ich auf meiner Seite, via folgendem Code Supersized als Hintergrund laden:
soweit kein Thema.
Nun möchte ich 1. das automatisch und passend zu dem Bild, welches gerade von Supersized als Hintergrund geladen wird, die Hintergrund von meiner Navigation geändert wird.
Die Navigation sieht wie folgt aus:
d.h. die Hintergrundfarbe wird in einer externen CSS definiert, die vor Supersized geladen wird.
Meine Fragen nun, gibt es
A)
Falls nein,
B)
Als weiteres Anliegen, gibt es auf der Seite auch noch ein weiteren Slider, der via iframe geladen wird.
ich hätte es nun gerne, das dieser Slider jeweils das nächste Bild, was als Hintergrund kommen würde, quasi als Vorschau, anzeigt, bevor es von Supersized gealden wird.
Geht das? Wie?
Zur ungefähren Übersicht, hier nochmal die kopmlette HTML (ohne den Head-Bereich mit den ganzen Scripten, aber die stehn ja weiter oben.=:
und nochmal alle meine Fragen als handliche Übersicht:
1. ich möchte das automatisch und passend zu dem Bild, welches gerade von Supersized als Hintergrund geladen wird, die Hintergrund von meiner Navigation geändert wird.
Also
A)
Falls nein,
B)
2. als weiteres Anliegen, gibt es auf der Seite auch noch ein weiteren Slider, der via iframe geladen wird.
ich hätte es nun gerne, das dieser Slider jeweils das nächste Bild, was als Hintergrund kommen würde, quasi als Vorschau, anzeigt, bevor es von Supersized gealden wird.
- - - Aktualisiert - - -
Noch eine Anmerkung. Die Navigation hat mehr als 2 Einträge, aber ich habe nur 2 gezeigt, da sich das System analog wiederholt.
Und zwar möchte ich auf meiner Seite, via folgendem Code Supersized als Hintergrund laden:
Code:
<!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>
<!-- look up maintemplate css -->
<link href="./Main-Theme/css/modules.css" rel="stylesheet" type="text/css" />
<link href="./Main-Theme/css/fullscreen.css" rel="stylesheet" type="text/css" />
<link href="./Main-Theme/css/home.css" rel="stylesheet" type="text/css" />
<link href="./Main-Theme/css/connect.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="./Main-Theme/css/expandcollapse.css" media="screen" />
<!-- look up maintemplate js -->
<script type="text/javascript" src="./Main-Theme/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./Main-Theme/js/jquery.main.js"></script>
<script type="text/javascript" src="./Main-Theme/js/jquery.tabs.js"></script>
<script type="text/javascript" src="./Main-Theme/js/connect.js"></script>
<!--[if IE]>
<script type="text/javascript" src="./Main-Theme/js/ie.js"></script><![endif]-->
<!-- supersized script 3.0 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="09_javascript/effects.core.js"></script> <!-- supersized 3.0 -->
<script src="09_javascript/effects.slide.js"></script> <!-- supersized 3.0 -->
<script type="text/javascript" src="09_javascript/supersized.3.0.js"></script>
<!-- supersized script 3.0 -->
<!-- supersized config -->
<!--
Supersized - Fullscreen Slideshow jQuery Plugin
Version : 3.0 !!! MODIFIED !!!
Site : www.buildinternet.com/project/supersized
Author : Sam Dunn
Company : One Mighty Roar (www.onemightyroar.com)
License : MIT License / GPL License
-->
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 1200,
startheight: 800,
vertical_center: 1,
slideshow: 1,
navigation: 0,
thumbnail_navigation: 0,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 3000,
slides : [
{image : '12_intro/news_juni13/intro10.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro07.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro03.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro09.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro02.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro05.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro01.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro04.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro08.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro06.jpg', title : 'xxx', url: 'news.html' },
]
};
$('#supersized').supersized();
});
</script>
<style type="text/css">
/* supersize plugin styles */
body { overflow: hidden; }
#loading {
position: absolute;
top: 49.5%;
left: 49.5%;
z-index: 10;
width: 70px;
height: 20px;
text-indent: -999em;
background-image: url(08_grafik/progress2.gif);
}
#supersized{ position: fixed; }
#supersized img{ -ms-interpolation-mode: bicubic; }
#supersized img, #supersized a {
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}
#supersized .prevslide, #supersized .prevslide img { z-index: 1; }
#supersized .activeslide, #supersized .activeslide img { z-index: 2;}
</style>
<!-- supersized config -->
</head>soweit kein Thema.
Nun möchte ich 1. das automatisch und passend zu dem Bild, welches gerade von Supersized als Hintergrund geladen wird, die Hintergrund von meiner Navigation geändert wird.
Die Navigation sieht wie folgt aus:
Code:
<!-- NAVIGATION START //-->
<nav id="nav">
<h3 class="visuallyhidden">Navigation</h3>
<!-- Main-Entrys of Navigation //-->
<ul>
<!-- Main-Entry 1 //-->
<li class="active"><a title="Start" href="#" class=""<span>Start</span></a><span class="arrow"></span></li>
<!-- Main-Entry 2 //-->
<li class=""><a title="Portfolio" href="./portfolio" class="hasChildrens"><span>Portfolio</span></a>
<!-- Sub-Entrys of Main-Entry 2 //-->
<div class="drop">
<ul class="globalSectionsLevel1 show-static">
<li class="plain "><a title="Themenreihen & Kurse" href="./themen_kurse_m2" class=""><span>Themenreihen & Kurse</span></a></li>
<li class="plain "><a title="Veröffentlichungen" href="./publikationen_m3" class=""><span>Veröffentlichungen</span></a></li>
<li class="plain "><a title="Arbeitsblätter & Mehr" href="./arbeitsmatherial_m5" class=""><span>Arbeitsblätter & Mehr</span></a></li>
<li class="plain "><a title="" href="./" class=""><span> </span></a></li>
</ul>
<!-- Mini-Menu into the Sub-Entrys of Main-Entry 2 //-->
<div class="static"><img title="" alt="" src="./Main-Theme/images/portfolio-1024x493.jpg" width="154" height="119" class="image-inline"><h4><a href="./"> </a></h4>
<p> <a href="./"> </a></p>
<p> <a href="./"> </a></p>
</div>
<div class="static"><img title="" alt="" src="" class="image-inline"><h4><a href="./"> </a></h4>
<p> <a href="./"> </a> </p>
<p> <a href="./"> </a> </p>
</div>
<div class="visualClear"><!-- -->
</div>
</div>
</li>
</nav>
<!-- NAVIGATION END //-->
</div>
</header>
<!-- HAUPTINHALT START //-->d.h. die Hintergrundfarbe wird in einer externen CSS definiert, die vor Supersized geladen wird.
Meine Fragen nun, gibt es
A)
ein Script/Möglichkeit das das Hintergrundbuild analysiert und passend dazu die Hintergrundfarbe auswählt?
Wie müsste sowas etwa aussehen?Falls nein,
B)
wie kann ich die CSS oder die in der CSS definierte Hintergrundfarbe für die Navigation, passierend auf dem Supersized-Script so manipulieren, das sie zum Bild passt?
Als weiteres Anliegen, gibt es auf der Seite auch noch ein weiteren Slider, der via iframe geladen wird.
Code:
<!-- Iframe for slider2 START //-->
<iframe src="picslide2.html" style="border:0px none;" name="pictureslider" scrolling="no" frameborder="0" align="middle" marginheight="0px" marginwidth="0px" height="220" width="974"></iframe>
<!-- Iframe for slider2 ENDE //-->ich hätte es nun gerne, das dieser Slider jeweils das nächste Bild, was als Hintergrund kommen würde, quasi als Vorschau, anzeigt, bevor es von Supersized gealden wird.
Geht das? Wie?
Zur ungefähren Übersicht, hier nochmal die kopmlette HTML (ohne den Head-Bereich mit den ganzen Scripten, aber die stehn ja weiter oben.=:
HTML:
<!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>
<!-- look up maintemplate css -->
<link href="./Main-Theme/css/modules.css" rel="stylesheet" type="text/css" />
<link href="./Main-Theme/css/fullscreen.css" rel="stylesheet" type="text/css" />
<link href="./Main-Theme/css/home.css" rel="stylesheet" type="text/css" />
<link href="./Main-Theme/css/connect.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="./Main-Theme/css/expandcollapse.css" media="screen" />
<!-- look up maintemplate js -->
<script type="text/javascript" src="./Main-Theme/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./Main-Theme/js/jquery.main.js"></script>
<script type="text/javascript" src="./Main-Theme/js/jquery.tabs.js"></script>
<script type="text/javascript" src="./Main-Theme/js/connect.js"></script>
<!--[if IE]>
<script type="text/javascript" src="./Main-Theme/js/ie.js"></script><![endif]-->
<!-- supersized script 3.0 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="09_javascript/effects.core.js"></script> <!-- supersized 3.0 -->
<script src="09_javascript/effects.slide.js"></script> <!-- supersized 3.0 -->
<script type="text/javascript" src="09_javascript/supersized.3.0.js"></script>
<!-- supersized script 3.0 -->
<!-- supersized config -->
<!--
Supersized - Fullscreen Slideshow jQuery Plugin
Version : 3.0 !!! MODIFIED !!!
Site : www.buildinternet.com/project/supersized
Author : Sam Dunn
Company : One Mighty Roar (www.onemightyroar.com)
License : MIT License / GPL License
-->
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 1200,
startheight: 800,
vertical_center: 1,
slideshow: 1,
navigation: 0,
thumbnail_navigation: 0,
transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 1,
slide_captions: 1,
slide_interval: 3000,
slides : [
{image : '12_intro/news_juni13/intro10.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro07.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro03.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro09.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro02.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro05.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro01.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro04.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro08.jpg', title : 'xxx', url: 'news.html' },
{image : '12_intro/news_juni13/intro06.jpg', title : 'xxx', url: 'news.html' },
]
};
$('#supersized').supersized();
});
</script>
<style type="text/css">
/* supersize plugin styles */
body { overflow: hidden; }
#loading {
position: absolute;
top: 49.5%;
left: 49.5%;
z-index: 10;
width: 70px;
height: 20px;
text-indent: -999em;
background-image: url(08_grafik/progress2.gif);
}
#supersized{ position: fixed; }
#supersized img{ -ms-interpolation-mode: bicubic; }
#supersized img, #supersized a {
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}
#supersized .prevslide, #supersized .prevslide img { z-index: 1; }
#supersized .activeslide, #supersized .activeslide img { z-index: 2;}
</style>
<!-- supersized config -->
</head>
<body class="template-homepage_html template-homepage_html portaltype-agencypage site section-index icons-on" oncontextmenu="return false">
<!-- preload background -->
<div id="preload">
<img src="08_grafik/logo_index.png" alt="preload" />
<img src="08_grafik/progress.gif" alt="preload" />
<img src="01_news/news_adac.jpg" alt="preload" />
<img src="01_news/news_quattro2.jpg" alt="preload" />
<img src="01_news/news_lemans.jpg" alt="preload" />
<img src="01_news/news_audi_rs6.jpg" alt="preload" />
<img src="01_news/audi_mexico.jpg" alt="preload" />
<img src="02_agentur/agentur_objektiv.jpg" alt="preload" />
<img src="03_best_practice/bp_fischer.jpg" alt="preload" />
<img src="05_kontakt/postkasten.jpg" alt="preload" />
</div>
<!-- inhalte der webseite //-->
<div>
<noscript>Javascript must be enabled for the correct page display</noscript>
<div id="wrapper">
<header id="header">
<div class="header-holder">
<a class="skip" accesskey="S" href="#main-content">zum Inhalt</a>
<span class="bg-globe"></span>
<div class="header-panel">
<hgroup>
<h1 class="logo"><a href="./"><img src="" alt=""><span> Logo </span></a></h1>
<h2 class="work-text"> </h2>
</hgroup>
<div class="search-form">
<!-- TOP-THEMA START //-->
<div class="row">
<div class="add-nav">
<ul>
<li><a title="#" class="active" href="./">Aktuell</a></li>
<li><a title="" href="./archiv">Archiv</a></li>
<li><a title="" href="./kontakt">Kontakt</a></li>
</ul>
</div>
</div>
<!-- TOP-THEMA END //-->
<div class="row">
<!-- SEACH START //-->
<form id="suche">
<fieldset>
<div1> </div1>
<script>
(function() {
var cx = '007610723754450814993:kqfhugdiwy0';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:search></gcse:search>
<div2> </div2>
</fieldset>
</form>
</div>
<!-- Langauage-Selction START //-->
<div class="row">
<ul class="lang-list">
<li lang="1" xml:lang="1"><a title="English" href="./en/index">English</a></li>
<!-- <li lang="2" xml:lang="2"><a title="Lang 2" href="./">Lang 2</a></li>
<li lang="3" xml:lang="3"><a title="Lang 3" href="./">Lang 3</a></li>
<li lang="4" xml:lang="4"><a title="Lang 4" href="./">Lang 4</a></li>
<li lang="5" xml:lang="5"><a title="Lang 5" href="./">Lang 5</a></li>
<li lang="6" xml:lang="6"><a title="Lang 6" href="./">Lang 6</a></li> //-->
<li><a title="More Languages" alt="More Languages" class="more" href="./languages">More<span class="visuallyhidden"> Languages</span></a></li>
</ul><br/>
</div>
<!-- Langauage-Selction END //-->
</div>
</div>
<!-- Iframe for slider2 START //-->
<iframe src="picslide2.html" style="border:0px none;" name="pictureslider" scrolling="no" frameborder="0" align="middle" marginheight="0px" marginwidth="0px" height="220" width="974"></iframe>
<!-- Iframe for slider2 ENDE //-->
<!-- NAVIGATION START //-->
<nav id="nav">
<h3 class="visuallyhidden">Navigation</h3>
<!-- Main-Entrys of Navigation //-->
<ul>
<!-- Main-Entry 1 //-->
<li class="active"><a title="Start" href="#" class=""<span>Start</span></a><span class="arrow"></span></li>
<!-- Main-Entry 2 //-->
<li class=""><a title="Portfolio" href="./portfolio" class="hasChildrens"><span>Portfolio</span></a>
<!-- Sub-Entrys of Main-Entry 2 //-->
<div class="drop">
<ul class="globalSectionsLevel1 show-static">
<li class="plain "><a title="Themenreihen & Kurse" href="./themen_kurse_m2" class=""><span>Themenreihen & Kurse</span></a></li>
<li class="plain "><a title="Veröffentlichungen" href="./publikationen_m3" class=""><span>Veröffentlichungen</span></a></li>
<li class="plain "><a title="Arbeitsblätter & Mehr" href="./arbeitsmatherial_m5" class=""><span>Arbeitsblätter & Mehr</span></a></li>
<li class="plain "><a title="" href="./" class=""><span> </span></a></li>
</ul>
<!-- Mini-Menu into the Sub-Entrys of Main-Entry 2 //-->
<div class="static"><img title="" alt="" src="./Main-Theme/images/portfolio-1024x493.jpg" width="154" height="119" class="image-inline"><h4><a href="./"> </a></h4>
<p> <a href="./"> </a></p>
<p> <a href="./"> </a></p>
</div>
<div class="static"><img title="" alt="" src="" class="image-inline"><h4><a href="./"> </a></h4>
<p> <a href="./"> </a> </p>
<p> <a href="./"> </a> </p>
</div>
<div class="visualClear"><!-- -->
</div>
</div>
</li>
</nav>
<!-- NAVIGATION END //-->
</div>
</header>
<!-- HAUPTINHALT START //-->
[...]
<!-- loading display while images load -->
<div id="loading"> </div>
<!-- slides -->
<div id="supersized"></div>
</body>
</html>und nochmal alle meine Fragen als handliche Übersicht:
1. ich möchte das automatisch und passend zu dem Bild, welches gerade von Supersized als Hintergrund geladen wird, die Hintergrund von meiner Navigation geändert wird.
Also
A)
gibt es ein Script/möglichkeit das das Hintergrundbuild analysiert und passend dazu die Hintergrundfarbe auswählt?
Wie müsste sowas etwa aussehen?Falls nein,
B)
wie kann ich die in der CSS definierte Hintergrundfarbe ( bzw. die CSS) passierend auf dem Supersized-Script so manipulieren, das sie zum Bild passt?
2. als weiteres Anliegen, gibt es auf der Seite auch noch ein weiteren Slider, der via iframe geladen wird.
Code:
<!-- Iframe for slider2 START //-->
<iframe src="picslide2.html" style="border:0px none;" name="pictureslider" scrolling="no" frameborder="0" align="middle" marginheight="0px" marginwidth="0px" height="220" width="974"></iframe>
<!-- Iframe for slider2 ENDE //-->ich hätte es nun gerne, das dieser Slider jeweils das nächste Bild, was als Hintergrund kommen würde, quasi als Vorschau, anzeigt, bevor es von Supersized gealden wird.
Geht das? Wie?
- - - Aktualisiert - - -
Noch eine Anmerkung. Die Navigation hat mehr als 2 Einträge, aber ich habe nur 2 gezeigt, da sich das System analog wiederholt.
Zuletzt bearbeitet:
