Antworten auf deine Fragen:
Neues Thema erstellen

'Nivo Slider' in Forum einbauen

Assi70

Verschnaufer

Hallo,

ich möchte gerne den 'Nivo Slider' http://nivo.dev7studios.com/ in mein phpBB3 Forum einbauen!
Am besten über dem Hauptforum, quasi im Headerbereich!
Hat damit schon mal jemand Erfahrung gemacht, meine Programmierkenntnisse halten sich leider ein wenig in Grenzen ... :rolleyes:

Danke für Eure Hilfe!
 

fexx

Aktives Mitglied

AW: 'Nivo Slider' in Forum einbauen

Ich kenn das phpBB3 Forum jetzt nicht, aber wie ist denn das Theme aufgebaut? Kommt man an den Kopfbereich ran? Dann ists eigentlich kein Problem. :)
 

Assi70

Verschnaufer

AW: 'Nivo Slider' in Forum einbauen

Ja, kommt man eigentlich überall ran, leider weiss ich nicht genau wo ich ansetzen muss ....

Diese Slideshow hat ne eigene CSS, javascripte usw! Vielleicht reicht auch schon eine kleine Starthilfe um zu wissen wo ich ansetzen muss.
Hier der Link zu meinem Board:
Der Newsbereich der jetzt im Board oben integriert ist, würde dann wegfallen, zugunsten der Slideshow!

Bin über jede Hilfe dankbar! ;)
 

ovbb

es gibt für alles eine weg

AW: 'Nivo Slider' in Forum einbauen

Leider lässt sich die Seite zZ nicht öffnen ... kann dir somit auch nicht weiterhelfen ... dachte ich bekomme aus dem Quellcode eine kleine Stütze

hm ... dann such ich mal nach einer Installation bei mir ....
 

Assi70

Verschnaufer

AW: 'Nivo Slider' in Forum einbauen

diese sche.... alpennic.com, geht schon seit dem WE so!
sonst kommste auch so ran:
 

ovbb

es gibt für alles eine weg

AW: 'Nivo Slider' in Forum einbauen

das funkt :)

so du möchtest anstellede m headerbild jetzt die slide-show?
 

ovbb

es gibt für alles eine weg

AW: 'Nivo Slider' in Forum einbauen

Im Header definiert der Abschnitt <div id="wrapheader"> </div> den Header

Wie du siehst ist da ein weiterer <div id="logodesc"></div>-Tag enthalten welcher eine Tabelle enthält in der das Logo und die Überschrift enthalten sind.

So jetzt nur noch die richtige Datei zum ändern finden ...
 

fexx

Aktives Mitglied

AW: 'Nivo Slider' in Forum einbauen

Naja du musst halt sehen, dass du die Dateien eingebunden bekommst ...

Die spezifischen CSS Eigenschaften könntest du auch in dein Haupt Stylesheet einfügen und die JS Dateien zur Not (achtung unschön ;-)) direkt dort laden, wo du den Slider einfügst.
 

Assi70

Verschnaufer

AW: 'Nivo Slider' in Forum einbauen

nein, nicht anstelle des headers, sonder anstelle des Newsbereiches unter dem Header (wo die 3 Bilder nebeneinander angeordnet sind)!

Da solte die Slideshow rein :)
 

ovbb

es gibt für alles eine weg

AW: 'Nivo Slider' in Forum einbauen

ok

das wär dann der bereich

HTML:
<table width="99%" border="0" align="center" cellspacing="10">   <tr align="center">     <td><h4>02.07.<br />Feiere mit Cityville den Unabhängigkeitstag!<br />Weitere Infos dazu <a href="http://cityville.bplaced.net/phpBB3/viewtopic.php?f=27&t=245">hier!</a> </h4>     <td><h4>04.07.<br />Ihr könnt ab sofort die Kaffeestube ausbauen!<br />Wie es funktioniert seht Ihr <a href="http://cityville.bplaced.net/phpBB3/viewtopic.php?f=27&t=253">hier!</a>  </h4>     <td><h4>30.06.<br />Farmville meets Cityville!<br /> Mehr zum neuesten Update Zynga's <a href="http://cityville.bplaced.net/phpBB3/viewtopic.php?f=27&t=239">hier!</a></h4></tr>   <tr align="center">     <td><img src="http://cityville.bplaced.net/phpBB3/images/forum/4juli.png" alt="4. Juli" /><br />&nbsp;</td>     <td><img src="http://cityville.bplaced.net/phpBB3/images/forum/kaffeestube1.png" alt="Kaffestube" />&nbsp;</td>     <td><img src="http://cityville.bplaced.net/phpBB3/images/forum/farmville_promo.png"  alt="Farmville" />&nbsp;</td>    </tr> </table>

welches Style-Template verwendest du?
 

ovbb

es gibt für alles eine weg

AW: 'Nivo Slider' in Forum einbauen

Header-Infos findest du in den Standard-Templates in der styles\prosilver\template\overall_header.html. Hier kannst auch deine JS hineinpacken.

Für den Footer das äquivalente in overall_footer.html

... der Rest ist nicht so einfach zu finden :)
 

ovbb

es gibt für alles eine weg

AW: 'Nivo Slider' in Forum einbauen

so ... hier ist in der index_body.html alles drinnen.

<!-- INCLUDE forumlist_body.html --> mit dieser Zeile wird der Teil darunter ... also die Forenliste eingebunden.

<!-- INCLUDE breadcrumbs.html --> ist die Zeile vorher mit der Sommerzeit und am unter der Forenliste.

Einmal wird Sie im overall_header.html eingebunden und einmal in der index_body.html
ergo muss deine Slideshow dann dazwischen rein kommen
 

Assi70

Verschnaufer

AW: 'Nivo Slider' in Forum einbauen

@ovbb - vielen Dank für Deine Mühe, die Bilder werden schon angezeigt, aber die javascripts werden nicht ausgeführt!
Liegen im selben verzeichniss wo auch die overall_header.html liegt....
 

Assi70

Verschnaufer

AW: 'Nivo Slider' in Forum einbauen

In der overall_header im <head> </head> Bereich!
Bin mir aber wie gesagt nicht so sicher ob das auch passt wie ich es gemacht habe ...
Wie müsste das aussehen?

Habe den Code genommen, der auf der HP des Herstellers angezeigt wird.(link im 1.Beitrag von mir)
 
B

blizzart88

Guest

AW: 'Nivo Slider' in Forum einbauen

Ich finde den Slider echt nett, werde ihn wohl auch mal bei einer meiner Homepages einbauen.
 

Sturmkraehe

Nicht mehr ganz neu hier

AW: 'Nivo Slider' in Forum einbauen

@Assi70 hat sich das ganze eigentlich erledigt oder ist es noch aktuell?

also: phpBB3/styles/subsilver2/overall_header.html öffnen

dann:
PHP:
<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />
suchen und darunter:
PHP:
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

und:

PHP:
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random', // Specify sets like: 'fold,fade,sliceDown'
        slices:15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:true, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>
- natürlich nur mit den Optionen die du benötigst ;)


einfügen, was dann so ausschauen sollte:

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" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!-- IF S_ENABLE_FEEDS -->
	<!-- IF S_ENABLE_FEEDS_OVERALL --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {SITENAME}" href="{U_FEED}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_NEWS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_NEWS}" href="{U_FEED}?mode=news" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUMS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_ALL_FORUMS}" href="{U_FEED}?mode=forums" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_NEW}" href="{U_FEED}?mode=topics" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPICS_ACTIVE --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FEED_TOPICS_ACTIVE}" href="{U_FEED}?mode=topics_active" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_FORUM and S_FORUM_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_FORUM} - {FORUM_NAME}" href="{U_FEED}?f={S_FORUM_ID}" /><!-- ENDIF -->
	<!-- IF S_ENABLE_FEEDS_TOPIC and S_TOPIC_ID --><link rel="alternate" type="application/atom+xml" title="{L_FEED} - {L_TOPIC} - {TOPIC_TITLE}" href="{U_FEED}?f={S_FORUM_ID}&amp;t={S_TOPIC_ID}" /><!-- ENDIF -->
<!-- ENDIF -->

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random', // Specify sets like: 'fold,fade,sliceDown'
        slices:15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:true, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
	if ({S_NEW_PM})
	{
		popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
	}
<!-- ENDIF -->

function popup(url, width, height, name)
{
	if (!name)
	{
		name = '_popup';
	}

	window.open(url.replace(/&amp;/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
	return false;
}

function jumpto()
{
	var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
	var per_page = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';

	if (page !== null && !isNaN(page) && page == Math.floor(page) && page > 0)
	{
		if (base_url.indexOf('?') == -1)
		{
			document.location.href = base_url + '?start=' + ((page - 1) * per_page);
		}
		else
		{
			document.location.href = base_url.replace(/&amp;/g, '&') + '&start=' + ((page - 1) * per_page);
		}
	}
}

/**
* Find a member
*/
function find_username(url)
{
	popup(url, 760, 570, '_usersearch');
	return false;
}

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
	var parent = document.getElementById(id);
	if (!parent)
	{
		eval('parent = document.' + id);
	}

	if (!parent)
	{
		return;
	}

	var rb = parent.getElementsByTagName('input');
	
	for (var r = 0; r < rb.length; r++)
	{
		if (rb[r].name.substr(0, name.length) == name)
		{
			rb[r].checked = state;
		}
	}
}

<!-- IF ._file -->

	/**
	* Play quicktime file by determining it's width/height
	* from the displayed rectangle area
	*
	* Only defined if there is a file block present.
	*/
	function play_qt_file(obj)
	{
		var rectangle = obj.GetRectangle();

		if (rectangle)
		{
			rectangle = rectangle.split(',')
			var x1 = parseInt(rectangle[0]);
			var x2 = parseInt(rectangle[2]);
			var y1 = parseInt(rectangle[1]);
			var y2 = parseInt(rectangle[3]);

			var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
			var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
		}
.....
Das ganze dann speichern ;)

Als nächstes dann die datei öffnen die für den newsbereich zuständig ist (hat ein vorredner ja schon geposted) und da dann eben:

PHP:
<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>

und dann entweder in die standard css oder in de navo slider css:

PHP:
#slider {
    position:relative;
    width:618px; /* Change this to your images width */
    height:246px; /* Change this to your images height */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

(damit es beim laden auch schön aussieht ;) )
 
Zuletzt bearbeitet:

Assi70

Verschnaufer

AW: 'Nivo Slider' in Forum einbauen

Hallo Sturmkraehe,

Danke für Deine super Unterstützung! :daumenhoch:
Das ganze ist für mich noch nicht erledigt, hatte leider noch keine Zeit weiter zu arbeiten ....
Ich werde lt. Deiner Anleitung das heute mal testen und dann die Infos hier posten ob es funktioniert hat, aber mit Deiner Anleitung MUSS das ja was werden.;)

Falls es Probleme gibt, darf ich mich hoffentlich noch mal an Dich wenden!

LG Assi
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.640
Beiträge
1.538.506
Mitglieder
67.559
Neuestes Mitglied
mic4mac
Oben