Erst mal ja richtig als Grundlage habe ich die "JQUERY BUBBLE POPUP" genommen.
Es gibt verschiedene Möglichkeiten Sprechblasen zu gestalten ich habe zu erst versucht reine CSS sprechblasen zu nehmen diese waren aber nicht nach meinen Vorstellungen so bin ich letztlich bei den JQUERY BUBBLE POPUP hängen geblieben.
Okay dann versuche ich mal mein bestes und erstelle eine kleine Installations- Anleitung. Anhand des Standart Templates.
Als Grundlage habe ich die Navileiste aus dem Beitrag
http://www.modified-shop.org/forum/index.php?topic=13847.0 genommen.
Hier der Download Link zum Plugin
https://sourceforge.net/projects/jqbubblepopup/files/latest/downloadZu erst im Ordner "templates\xtc5\javascript" die Datei "general.js.php" öffnen und am Anfang folgende zeilen einsetzen :
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.bubblepopup.v2.3.1.min.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.js" type="text/javascript"></script>
am Ende der Datei "general.js.php" bitte
<script type="text/javascript">
<!--
$(document).ready(function(){
//create a bubble popup
$('.link1').CreateBubblePopup({
selectable: false,
position : 'left',
align : 'middle',
width: '250px',
innerHtml: 'Hier steht der Text der Sprechblase',
innerHtmlStyle: {
color:'#00000',
'text-align':'left'
},
themeName: 'grey',
themePath: 'images/navbar/'
});
});
//-->
</script>
einfügen.
Anschliessend müssen alle Dateien (JS / CSS / und bilder (Themes)) in den entsprechenden Ordner übertragen werden.
bei Mir sieht das wie folgt aus:
javascript/jquery.bubblepopup.v2.3.1.css
javascript/jquery.min.js
javascript/jquery.bubblepopup.v2.3.1.min.js
javascript/jquery.nivo.slider.js
Ich habe den Theme Ordner für das Graue Design bei mir unter
images/navbar/grey (Achtung bei änderung des Pfads bitte entsprechend in der general.js.php auch ändern)
Verlinken könnt ihr die blasen mit einem CSS Class Tag
Das sieht in meinem Beisiel so aus (ich habe meine classe link1 genannt. (Der name der classe muss identisch mit dem aus der general.js.php sein.)
bei mir in der templates\xtc5\index.html
<a id="sys_hotline" class="link1" target="_self" href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=7', 'NONSSL');{/php}"> </a>
Alle anderen Einstellungen wie Ausrichtung usw der Sprechblase entnehmt bitte der Dokumentation des Herstellers.
Ich hoffe ich habe nichts vergessen.