Sie sind nicht angemeldet.

chris150972

Einsteiger

Beiträge: 3

Xpage-Version: Xpage Internet Studio 6 Professional

Wohnort: Bayern

Betriebssystem: Windows XP

1

Dienstag, 12. April 2011, 14:44

Visual lightbox in xpage einbinden?

Hallo Leute,

wir haben uns die Visual Lightbox gekauft. Ich habe damit eine Bildergalerie erstellt und jetzt versuche ich diese in Xpage einzubinden. Die Head und Body codes habe ich aus der von Visual Lightbox ertellten html datei herauskopiert und in meinem Projekt unter Head und Body eingefügt.

Soweit funktioniert das sogar, aber leider nicht wie es soll. Ich habe 5 Bilder in der Gallerie, wenn ich jetzt den Button anklicke kommt das erste in der Lightbox, dann kommt aber nochmal das erste und dann erst das 2.

Da ich in html nicht unbedingt ein Profi bin, weiss ich nicht wo der fehler ist. In der von Lightbox erstellen html Seite klappt es wie es soll.

Diese hat folgenden 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" lang="en" xml:lang="en">
<head>
<title>schwarz-sommer</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="schwarz-sommer" />
<meta name="description" content="schwarz-sommer" />
<link rel="shortcut icon" href="favicon.ico" />

<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
<script src="engine/js/jquery.min.js" type="text/javascript"></script>
<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
<script src="engine/js/vlbdata.js" type="text/javascript"></script>
<!-- End VisualLightBox.com HEAD section -->

</head>
<body bgcolor="#000000">

<!-- Start VisualLightBox.com BODY section id=1 -->
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/sommer01.jpg" title="Sommer01"><img src="data/thumbnails1/sommer01.jpg" alt="Sommer01"/></a>
<a class="vlightbox1" href="data/images1/sommer02.jpg" title="Sommer02"><img src="data/thumbnails1/sommer02.jpg" alt="Sommer02"/></a>
<a class="vlightbox1" href="data/images1/sommer03.jpg" title="Sommer03"><img src="data/thumbnails1/sommer03.jpg" alt="Sommer03"/></a>
<a class="vlightbox1" href="data/images1/sommer04.jpg" title="Sommer04"><img src="data/thumbnails1/sommer04.jpg" alt="Sommer04"/></a>
<a class="vlightbox1" href="data/images1/sommer05.jpg" title="Sommer05"><img src="data/thumbnails1/sommer05.jpg" alt="Sommer05"/></a><a class="vlb" style="display:none" href="http://visuallightbox.com">Image with jQuery by VisualLightBox.com v4.4</a>
</div>
<!-- End VisualLightBox.com BODY section -->

</body>
</html>

Weiss jemand von euch Rat? Ihr könnt euch das auf folgender adresse mal anschauen: www.kirpfi.de
und dann auf das kleine halb zu sehende Bild klicken...

Wäre um Hilfe sehr dankbar...

LG Chris
  • Zum Seitenanfang

HansHo

Routiner

Beiträge: 127

Xpage-Version: Xpage Internet Studio 7 Professional

Wohnort: Wien

Betriebssystem: Windows Vista

2

Mittwoch, 13. April 2011, 08:01

Hallo Chris

Soweit ich das sehe, hast Du auf deiner HP die Lightbox zweimal eingebaut:

1. Unten über die fünf thumbnail pics - mit dem Code, den Du auch in Deiner Frage anführst - das klappt auch, wie es soll.

Offenbar hast Du den Code über Seite/Eigenschaften/zusätzlichen Quellcode einfügen/ vor </body>
eingefügt.

Ich würde vorschlagen, diesen Code

Quellcode

1
2
3
4
5
6
7
<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/sommer01.jpg" title="Sommer01"><img src="data/thumbnails1/sommer01.jpg" alt="Sommer01"/></a>
<a class="vlightbox1" href="data/images1/sommer02.jpg" title="Sommer02"><img src="data/thumbnails1/sommer02.jpg" alt="Sommer02"/></a>
<a class="vlightbox1" href="data/images1/sommer03.jpg" title="Sommer03"><img src="data/thumbnails1/sommer03.jpg" alt="Sommer03"/></a>
<a class="vlightbox1" href="data/images1/sommer04.jpg" title="Sommer04"><img src="data/thumbnails1/sommer04.jpg" alt="Sommer04"/></a>
<a class="vlightbox1" href="data/images1/sommer05.jpg" title="Sommer05"><img src="data/thumbnails1/sommer05.jpg" alt="Sommer05"/></a><a class="vlb" style="display:none" href="http://visuallightbox.com">Image with jQuery by VisualLightBox.com v4.4</a>
</div>


in einen OLE Container einzufügen

OLE-Container / Registerkarte Eigenschaften / Quelltext

Diesen OLE (ohne scrollbar) und etwas grösser als die fünf Bilder auf Deiner HP machen - damit nicht irrtümlich in einem Browser doch noch unschöne Scrollbars erscheinen..

Den OLE kann man dann mit Xpage schön auf der Seite (in der Mitte zB) plazieren

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

2. Was die Light-box über das "Gebilde" in der Mitte Deiner HP betrifft

;)

Ich würde mal vorschlagen, das Ganze neu aufzubauen
Im Quelltext Deiner HP sind da Passagen drinnen, die keinen Sinn ergeben (für mich jedenfalls)

zB.:

Quellcode

1
<a href="alt="Sommer01"/></a>


Diese a TAG - href gibt für mich keinen Sinn; href (hypertextreferenz) sollte eine Pfadangabe sein..?!


Anweisung, für den Aufbau der Lightbox (im Archiv dieses Forums):

http://forum.cutex-systems.de/index.php?…light=lightbox&

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

3. Wozu brauchst Du die Lightbox zweimal?
Einmal über die fünf thumbnail pics unten und einmal über das eine Bild in der Mitte der HP...

Wenn du in der Mitte einen Container mit Text und einem kleinen Foto hast - mit dem Hinweis, eines der fünf kleinen Bilder darunter anzuklicken, tuts das auch..


Wie auch immer Dein Konzept ist - das Gebilde in der Mitte solltest Du lege artis neu aufbauen - vielleicht auch, wie in der Anleitung empfohlen, die verborgenen links über einen verborgenen OLE container (nicht über die verborgenen Buttons; das spart Code)


schönen Gruss
Hans
  • Zum Seitenanfang

Oliver Wendt

Experten-Team

Beiträge: 207

Xpage-Version: Xpage Internet Studio 6 Professional
Xpage Internet Studio 6 SE
Xpage Internet Studio Shop-Designer

Wohnort: Ulm

Betriebssystem: Windows 7
MAC OS X

3

Mittwoch, 13. April 2011, 11:16

Hallo Chris!

Hier mal ne Anleitung zum Einbau der VirtualLightBox


Demo


Gruß aus Ulm
Oliver Wendt
  • Zum Seitenanfang

chris150972

Einsteiger

Beiträge: 3

Xpage-Version: Xpage Internet Studio 6 Professional

Wohnort: Bayern

Betriebssystem: Windows XP

4

Mittwoch, 13. April 2011, 11:19

So war es nicht gedacht...

Hallo Hans und Oliver, erst mal danke für Eure Antwort.

So war es nicht gedacht, ich will die 5 kleinen Vorschaubilder gar nicht zu sehen haben, bzw. zum anklicken. Sondern nur in der kleinen Box einen klicklink, bei dem dann eben nur die Lightbox aufgeht.

Die andere Lightbox, den Du mir als Link angegeben hast, habe ich es auch schon versucht. Hat soweit auch geklappt, nur mit nem anderen Problem. Die gleiche Box die jetzt zu sehen ist, ist auf der fertigen Seite nochmal ne 2. Box mit Winterbildern. Wenn man dann die Sommerbilder in in der Lightbox öffnet, kommen erst diese 5, dann aber noch die 5 Winterbilder hinterher. obwohl die in einem Separatem Verzeichniss auf dem Server sind. Das habe ich nach der anleitung im forum gemacht, also mit dem atomium befehl, zum weiterklicken.

Da mir aber diese lightbox eh besser gefällt und wie die extra als uneingeschränkte weblicenz gekauft haben, wollte ich es jetzt mit dieser machen.

Aber wie gesagt, die 5 kleinen Vorschaubilder will ich gar nicht haben, sondern eben so, wie es in der beschrieben Lightbox auch geht. Ein Buttonklick und dann kommt direkt die Lightbox.

Weißt Du wie ich das machen, oder umbauen muss?

LG Chris

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »chris150972« (13. April 2011, 11:26)

  • Zum Seitenanfang

Oliver Wendt

Experten-Team

Beiträge: 207

Xpage-Version: Xpage Internet Studio 6 Professional
Xpage Internet Studio 6 SE
Xpage Internet Studio Shop-Designer

Wohnort: Ulm

Betriebssystem: Windows 7
MAC OS X

5

Mittwoch, 13. April 2011, 11:29

Ich habe das mal umgestellt!

Jetzt wird die Show mit nur einem Bild gestartet
Demo
  • Zum Seitenanfang

Oliver Wendt

Experten-Team

Beiträge: 207

Xpage-Version: Xpage Internet Studio 6 Professional
Xpage Internet Studio 6 SE
Xpage Internet Studio Shop-Designer

Wohnort: Ulm

Betriebssystem: Windows 7
MAC OS X

6

Mittwoch, 13. April 2011, 11:41

Auf der ersten Seite liegt jetzt der Downlad link zur Projektdatei.
Wer Rechtschreibfehler findet, darf diese behalten ;)

Gruss Aus Ulm
Oliver Wendt
  • Zum Seitenanfang

chris150972

Einsteiger

Beiträge: 3

Xpage-Version: Xpage Internet Studio 6 Professional

Wohnort: Bayern

Betriebssystem: Windows XP

7

Mittwoch, 13. April 2011, 11:56

Klappt leider no ned...

Hallo Oliver,

ich habe jetzt den Code in der Projektdatei Body entfernt und nur den Head Code belassen. Dann ein Bild eingefügt und mit klickaktion Hyperlink wie von dir geschrieben eingefügt, ich habe nur den pfad zum Bild entsprechend der ablage auf dem Server geändert, in meinem Fall: sommer/Sommer01.png class="vlightbox1" title="Sommer01"

dann kommt das, wenn man es anklickt:

The requested URL /sommer/Sommer01.png class= was not found on this server.

kannst unter www.kirpfi.de mal schauen...

LG Chris
  • Zum Seitenanfang

Oliver Wendt

Experten-Team

Beiträge: 207

Xpage-Version: Xpage Internet Studio 6 Professional
Xpage Internet Studio 6 SE
Xpage Internet Studio Shop-Designer

Wohnort: Ulm

Betriebssystem: Windows 7
MAC OS X

8

Mittwoch, 13. April 2011, 11:58

Kannst Du mir mal die XPG Datei per Mail senden?

info@realdesign4you.de

ich werfe dann mal kurz nen Blick drauf ;)

Gruß
Oliver
  • Zum Seitenanfang

Oliver Wendt

Experten-Team

Beiträge: 207

Xpage-Version: Xpage Internet Studio 6 Professional
Xpage Internet Studio 6 SE
Xpage Internet Studio Shop-Designer

Wohnort: Ulm

Betriebssystem: Windows 7
MAC OS X

9

Mittwoch, 13. April 2011, 12:04

Ändere mal Deine Schreibweise.
Großbuchstaben werden von vielen Servern nicht erkannt
  • Zum Seitenanfang

HansHo

Routiner

Beiträge: 127

Xpage-Version: Xpage Internet Studio 7 Professional

Wohnort: Wien

Betriebssystem: Windows Vista

10

Mittwoch, 13. April 2011, 12:17

Schau mal genau das Beispiel von Oliver an - beim link für das Bild fehlt bei Dir ein Anführungszeichen - oben.

Quellcode

1
.....href="sommer/sommer01.png .....


;)


Die links für die anderen Bilder müssen ebenfalls noch eingefügt werden...(in einen verborgenen OLE Container zB).

..vielleicht genügt auch, den OLE Container nicht zu verbergen, da beim Bsp. von Oliver die links keinen Text bzw kein Bild haben - also nicht sichtbar sind...

-------

<div id="vlightbox1">
<a class="vlightbox1" href="data/images1/000801_0181_0001_tams.jpg" title="000801_0181_0001_tams"></a>
.
.
.
<a class="vlb" style="display:none" href="http://visuallightbox.com">Simple Lightbox by VisualLightBox.com v4.8m</a>
</div>

----------

(Pfad anpassen nicht vergessen)


Gruss
Hans
  • Zum Seitenanfang

Oliver Wendt

Experten-Team

Beiträge: 207

Xpage-Version: Xpage Internet Studio 6 Professional
Xpage Internet Studio 6 SE
Xpage Internet Studio Shop-Designer

Wohnort: Ulm

Betriebssystem: Windows 7
MAC OS X

11

Mittwoch, 13. April 2011, 12:26

Hallo Hans!

Super! Das habe ich jetzt in der Projektdatei von Chris garnicht gesehen.
Desweiteren hatte er vergessen bei "zusätzlicher eigener Quellcode" das Häkchen zu setzen.
Ich denke, wenn man die Demodatei runterlädt, dass das ganze etwas ersichtlicher wird.

Gruß aus Ulm
Oliver
  • Zum Seitenanfang

Ähnliche Themen