Visual Slideshow mit linken Thumbs in iframe nur linksbündig

[lownri]

Hallochen und ein gesundes neues Jahr noch.

Ich nutze Visual Slideshow und binde es über iframe (manueller Code) ein. Funktioniert auch hervorragend. Zentriert ist der Inhalt aber nur, wenn ich die Miniaturansichten oben/ unten / oder garnicht anzeigen lasse.

Ich möchte jedoch gern die Variante mit den linken Miniaturen nutzen und den Inhalt des iframes zentriert haben.

Gelesen hab ich, dass ich mit

<iframe name="NAME" width="870" height="650" Scrolling="no" FrameBorder="0" style="height:100%; width:100%;" valign="top" align="center" margin:auto SRC="http://www.NAME.de/PFAD/"></iframe>

wohl nicht den Inhalt mit erfasse. Aber sorry, ne Lösung hab ich nicht kapiert. Kann mir jemand mit dem Code/ Weg helfen, wie ich den Inhalt zentriere (bei Nutzung der linken Thumbs)?

Danke im Voraus

[nettesekel]

Ich kann mir gerade nichts darunter vorstellen, wie sich die Ausrichtung der Tumbs auf die Ausrichtung eines Frame-Inhalts auswirken soll. Hast du mal einen Link zur Problemseite, damit ich das mal sehen kann? 

Dir ebenfalls ein gesundes, neues Jahr!

[lownri]

ich krieg ne Krise! Gestern war ich schon weiter. Da war die Galerie wenigstens in der Höhe komplett sichtbar. Jetzt passt es gar nicht mehr ...

Dabei ist es der gleiche Code ...

Hier : http://www.werbungplus.de/2015_1/html/hunde-werbungplus.php
Die Galerie ist hier: http://www.werbungplus.de/hunde/

Ich habe den Hintergrund im Masterborder (Haupttext) über <div align="center"> zentriert. Dann hab ich das weiße als Textvorlagen definiert und in einer Tabelle aufgebaut.

Den IFrame hab ich jetzt in einer zweiten Tabelle (zentriert und oben) groß genug aufgezogen und dort als "Text-HTML einfügen" eingetragen. (Screenshot der Tabelle anbei)

Ist es verständlich?

[nettesekel]

Teste mal diesen Code:

Code: HTML5

1. <iframe name="Hund" scrolling="no" style="min-height:660px; min-width:870px;" valign="top" src="Lernen%20Sie%20unsere%20%27Mitarbeiter%20f%C3%BCr%20Kundenunterhaltung%27%20kennen-Dateien/a.htm" align="middle" frameborder="0" ></iframe>

Wobei ich solche Galerien gar nicht mittels IFrame einbinden würde, da iFrames von diversen mobilen Geräten nicht mehr gescheit dargestellt werden können. Ich würde sowas direkt einbinden.

[lownri]

direkt einbinden?
Gibst du mir eine Hilfe dazu? Wie mach ich das?

Dem Weg bin ich hiernach gefolgt:

http://www.*nicht unterstützter Link*/nof/visual-lightbox/VisualSlideshow/slideshow.html

Code teste ich gleich, wobei mir dann der direkte Einbau besser gefallen würde ...   

[lownri]

Öhhhm - nicht unterstützter Link ... hab ich n Fettnäpfchen erwischt? Sorry, wenns so ist ...

Und den Code hab ich getestet. Unter der Quelle hat er nix gefunden. Ich hab diese jetzt mit einer internen Weiterleitung geändert src="../hunde/index.html"  und jetzt hab ich das Bild in der Höhe komplett aber links ausgerichtet

  

[nettesekel]

Wenn ich das richtig gesehen habe, hast du für diese Slideshow einen Ordner mit Bilder und Scripts, welcher sich "a_data" nennt den muss t du beim direkt einbinden von Hand auf deinen Server kopieren , aber das musstest du bei der iFrame-Variante vermutlich ebenso.

Also Punkt1, alle benötigten Datei müssen hochgeladen werden.

Punkt2 ist dann der Code.
Die Galerieseite die dir generiert wird (die, welche du im Frame angezeigt hast) öffnest du in einem Editor.

Du findest in diesem Dokument 2 kommentierte Bereiche:

Code: HTML5

1.         <!-- Start VisualSlideShow.com HEAD section -->
2.         <link rel="stylesheet" type="text/css" href="a_data/slideshow.css" media="screen">
3.         <style type="text/css">.slideshow a#vlb{display:none}</style>
4.         <script type="text/javascript" src="a_data/mootools.js"></script>
5.         <script type="text/javascript" src="a_data/visualslideshow.js"></script><script type="text/javascript" src="a_data/slideshow_002.js"></script><script type="text/javascript" src="a_data/slideshow.js"></script>
6.         <!-- End VisualSlideShow.com HEAD section -->

Code: HTML5

1.         <!-- Start VisualSlideShow.com BODY section -->
2.         <div id="show" class="slideshow">
3.         <div aria-labelledby="Slideshow-1420544128658" style="height: 480px; width: 600px;" class="slideshow-images"><a target="_self" id="" href="http://www.werbungplus.de/hunde/#"><img style="position: absolute; display: none;" id="" src="a_data/_b_6178_002.jpg" alt="Unsere - manchmal lautstarken - Kundenunterhalter" title="Unsere - manchmal lautstarken - Kundenunterhalter"><img style="position: absolute; display: block; visibility: visible; z-index: 2; left: -77px; top: auto; bottom: 0px; right: auto; opacity: 1; height: 566px; width: 849px;" id="slide-0" src="a_data/20140512_22_003.jpg" alt="Emiro (zurückhaltend und schüchtern) und Casanova" title="Emiro (zurückhaltend und schüchtern) und Casanova" height="640" width="960"></a><a target="_self" id="" href="http://www.werbungplus.de/hunde/#"><img style="position: absolute; display: block; visibility: visible; z-index: 1; height: 480px; width: 637px; left: auto; top: 0px; bottom: auto; right: -37px; opacity: 1;" id="" src="a_data/6169_002.jpg" alt="eine bellfreudige Begrüßung kann möglich seinstreicheln und spielen mit Casanova, Fevian und Gajou gern erwünscht" title="eine bellfreudige Begrüßung kann möglich seinstreicheln und spielen mit Casanova, Fevian und Gajou gern erwünscht" height="1807" width="2398"></a></div>
4.  
5. <a id="vlb" href="http://visualslideshow.com/">HTML Slideshow by VisualSlideshow.com v2.0</a>
6.         <div style="visibility: visible; opacity: 0.7;" id="Slideshow-1420544128658" role="description" aria-hidden="false" aria-busy="false" class="slideshow-captions">Emiro (zurückhaltend und schüchtern) und Casanova</div><div role="progressbar" class="slideshow-loader" aria-hidden="true"></div><div style="overflow: hidden;" role="menubar" class="slideshow-thumbnails"><ul style="left: -15px; position: absolute; top: 0px; width: 1080px;" role="menu"><li style="height: 100px; width: 130px;" id="Slideshow-14205441286620"><a style="background-color: rgb(255, 255, 255); visibility: visible; opacity: 0.5;" tabindex="0" role="menuitem" href="http://www.werbungplus.de/hunde/data/images/_b_6178.jpg" class="slideshow-thumbnails-hidden"><img src="a_data/_b_6178.jpg"></a></li><li style="height: 100px; width: 130px;" id="Slideshow-14205441286621"><a style="background-color: rgb(255, 255, 255); visibility: visible; opacity: 0.5;" tabindex="1" role="menuitem" href="http://www.werbungplus.de/hunde/data/images/6169.jpg" class="slideshow-thumbnails-hidden"><img src="a_data/6169.jpg"></a></li><li style="height: 100px; width: 130px;" id="Slideshow-14205441286622"><a style="background-color: rgb(122, 122, 122); visibility: visible; opacity: 1;" tabindex="2" role="menuitem" href="http://www.werbungplus.de/hunde/data/images/20140512_22.00.59.jpg" class="slideshow-thumbnails-hidden"><img src="a_data/20140512_22.jpg"></a></li><li style="height: 100px; width: 130px;" id="Slideshow-14205441286623"><a style="background-color: rgb(255, 255, 255); visibility: visible; opacity: 0.5;" tabindex="3" role="menuitem" href="http://www.werbungplus.de/hunde/data/images/20140512_22.03.19.jpg" class="slideshow-thumbnails-hidden"><img src="a_data/20140512_22_004.jpg"></a></li><li style="height: 100px; width: 130px;" id="Slideshow-14205441286624"><a style="background-color: rgb(255, 255, 255); visibility: visible; opacity: 0.5;" tabindex="4" role="menuitem" href="http://www.werbungplus.de/hunde/data/images/20140526_13.47.57.jpg" class="slideshow-thumbnails-hidden"><img src="a_data/20140526_13.jpg"></a></li><li style="height: 100px; width: 130px;" id="Slideshow-14205441286625"><a style="background-color: rgb(255, 255, 255); visibility: visible; opacity: 0.5;" tabindex="5" role="menuitem" href="http://www.werbungplus.de/hunde/data/images/20140615_13.36.11.jpg" class="slideshow-thumbnails-hidden"><img src="a_data/20140615_13.jpg"></a></li><li style="height: 100px; width: 130px;" id="Slideshow-14205441286626"><a style="background-color: rgb(255, 255, 255); visibility: visible; opacity: 0.5;" tabindex="6" role="menuitem" href="http://www.werbungplus.de/hunde/data/images/20141011_13.36.57.jpg" class="slideshow-thumbnails-hidden"><img src="a_data/20141011_13.jpg"></a></li><li style="height: 100px; width: 130px;" id="Slideshow-14205441286627"><a style="background-color: rgb(255, 255, 255); visibility: visible; opacity: 0.5;" tabindex="7" role="menuitem" href="http://www.werbungplus.de/hunde/data/images/20140512_22.03.25.jpg" class="slideshow-thumbnails-hidden"><img src="a_data/20140512_22_002.jpg"></a></li></ul></div></div>
7. <!-- End VisualSlideShow.com BODY section -->

Den ersten der beiden Bereiche platzierst du, wie es der Kommentar bereits sagt zwischen den Head-Tags der Seite, in der die Galerie zu sehen sein soll. https://www.nof-community.de/code-oder-codeschnipsel-an-der-richtigen-stelle-einfuegen/code-zwischen-den-head-tags-der-seite-einfugen/

Den zweiten Codeabschnitt platzierst du dort, wo du jetzt den i-Framecode platziert hattest.

Danach publizierst du und wir müssen gucken, ob die Pfade alle passend sind.


PS.

Kommentare sind diese "Dinger", in diesem konkreten Fall kennzeichnen sie jeweil Beginn und Ende eines Codeabschnitts. Die Kommentare solltest du für spätere Änderungen ruhig mit übernehmen, so bleibt es für dich verständlicher, wofür diese Codes da sind.

Code: HTML5

1. <!-- Start VisualSlideShow.com HEAD section -->

-------------------------------------------------------------------------------------

Nachtrag:

Öhhhm - nicht unterstützter Link ... hab ich n Fettnäpfchen erwischt? Sorry, wenns so ist ...

Alles gut.


Wollen wir uns weiter um das iFrame kümmern oder möchtest du lieber die direkte Variante angehen? Dann einfach mal der Anleitung in diesem Post folgen.

[lownri]

Hi du,

ich würde lieber die direkte Form angehen. Hab die Anleitung jetzt ausgeführt und einiges gelernt. DANKE    Hab die beiden Ordner vom der Galerie in meinem html-Ordner kopiert. Es läuft jetzt.

Allerdings immer noch mit meinem ersten Problem ... linksbündig.
http://www.werbungplus.de/2015_1/html/hunde-werbungplus.php

Damit ich mich nicht verrenne, habe ich mit dem Programm einfach eine Variante mit Thumbs oben erstellt und es ist zentriert. OHNE MEIN ZUTUN. Sobald die Thumbs links sind, sind sie linksbündig. Liegt also nicht an NOF oder der Einfügung, sondern an Visual Slideshow.

Muss ich also damit leben und die Thumbs oben wählen oder fällt dir noch ein Trick ein?

[nettesekel]

So schnell geben wir uns nicht geschlagen, ich schau mal in den Quelltext...

[nettesekel]

Irgendwie hängt sich mein FF ständig wegen eines Script-Fehlers auf.
Kannst du mal eine Vorlage von der Seite erstellen, aber bitte eine richtige Vorlage... und dann legst du diese auf deinen Server und gibst mir den Link dazu. Zusätzlich benötige ich die Dateien die zu dieser Galerie gehören, am besten zippen und ebenfalls auf den Server legen und mir den Link geben. So kann ich das vor Ort mal testen und herausfinden, wo der Hund begraben liegt.

[lownri]

Hab dir PM geschickt ...

DANKE

[nettesekel]

Im Ordner engine>>css findest du die Datei slideshow.css
füge dort mal oberhalb dieses Eintrages

Code: HTML5

1. .slideshow {
2.         display: block;
3.         position: relative;
4.         z-index: 0;
5. }

folgende Zeile ein:

Code: HTML5

1. #show{margin-right:74px;}

Und tausche die Datei dann auf dem Server aus.


Und, du musst vermutlich den Rollover-Effekt deiner Navi abschalten, denn die rollover.js verursacht einen Scriptfehler der das Surfen auf der Seite zu einer Zumutung macht.

[lownri]

Nicht falsch verstehen, aber    *Umarm und Knutsch*

DANKE

PS: Rollover ist abgestellt.

[nettesekel]

Büdde, gern...