✔ JD Gallery Anzeige beim Laden!

Frosty5o · 3. März 2010

Hi Leute,

wollte mal fragen ob jemand von euch Erfahrung mit der JD Gallery hat.
Hab Sie eingebunden und funktioniert alles fehlerfrei. Ich habe sie über meinem content (im Header) eingebunden, sodass sie auf jeder Seite angezeigt wird – soweit alles in Ordnung. Nur nervt es mich, dass wenn sie beim laden der Seite ganz kurz die eingebundenen Bilder untereinander anzeigt – dadurch laufen sie für kurze Zeit in den content. Ich wollte fragen ob jemand weiß, ob sich das mit einem "css-Blockbefehl" oder dergleichen vermeiden lässt?

Hoffentlich weiß jemand was, regt mich auf!

Gruß!

Maik · 3. März 2010

Moin,

vielleicht hast du die Möglichket per onload()-Event das Anzeigen der Gallerie zu steuern, wenn vom Browser die Seite komplett geladen wurde.

mfg Maik

Frosty5o · 3. März 2010

Maik hat gesagt.:
Moin,

vielleicht hast du die Möglichket per onload()-Event das Anzeigen der Gallerie zu steuern, wenn vom Browser die Seite komplett geladen wurde.

mfg Maik

Das is ne gute Idee. Wie soll ich das am besten anwenden? Hier wäre die .css

Wäre nett wennst mal kurz reinschaust!

CSS:

#myGallery, #myGallerySet, #flickrGallery
{
	width: 620px;
	height: 150px;
	z-index:5;
	border: 1px solid #000;
}

.jdGallery a
{
	outline:0;
}

#flickrGallery
{
	width: 500px;
	height: 334px;
}

#myGallery img.thumbnail, #myGallerySet img.thumbnail
{
	display: none;
}

.jdGallery
{
	overflow: hidden;
	position: relative;
}

.jdGallery img
{
	border: 0;
	margin: 0;
}

.jdGallery .slideElement
{
	width: 100%;
	height: 100%;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('img/loading-bar-black.gif');
}

.jdGallery .loadingElement
{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('img/loading-bar-black.gif');
}

.jdGallery .slideInfoZone
{
	position: absolute;
	z-index: 10;
	width: 100%;
	margin: 0px;
	left: 0;
	bottom: 0;
	height: 40px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

* html .jdGallery .slideInfoZone
{
	bottom: -1px;
}

.jdGallery .slideInfoZone h2
{
	padding: 0;
	font-size: 100%;
	margin: 0;
	margin: 2px 5px;
	font-weight: bold;
	color: inherit;
}

.jdGallery .slideInfoZone p
{
	padding: 0;
	font-size: 100%;
	margin: 2px 5px;
	color: #eee;
}

.jdGallery div.carouselContainer
{
	position: absolute;
	height: 135px;
	width: 100%;
	z-index: 10;
	margin: 0px;
	left: 0;
	top: 0;
}

.jdGallery a.carouselBtn
{
	position: absolute;
	bottom: 0;
	right: 30px;
	height: 20px;
	/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
	text-align: center;
	padding: 0 10px;
	font-size: 13px;
	background: #333;
	color: #fff;
	cursor: pointer;
}

.jdGallery .carousel
{
	position: absolute;
	width: 100%;
	margin: 0px;
	left: 0;
	top: 0;
	height: 115px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

.jdExtCarousel
{
	overflow: hidden;
	position: relative;
}

.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
	position: absolute;
	width: 100%;
	height: 78px;
	top: 10px;
	left: 0;
	overflow: hidden;
}

.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner
{
	position: relative;
}

.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
	cursor: pointer;
	background: #000;
	background-position: center center;
	float: left;
	border: solid 1px #fff;
}

.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail
{
	margin-bottom: 10px;
}

.jdGallery .carousel .label, .jdExtCarousel .label
{
	font-size: 13px;
	position: absolute;
	bottom: 5px;
	left: 10px;
	padding: 0;
	margin: 0;
}

.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
	font-size: 10px;
	position: absolute;
	bottom: 5px;
	right: 10px;
	padding: 1px 2px;
	margin: 0;
	background: #222;
	border: 1px solid #888;
	cursor: pointer;
}

.jdGallery .carousel .label .number, .jdExtCarousel .label .number
{
	color: #b5b5b5;
}

.jdGallery a
{
	font-size: 100%;
	text-decoration: none;
	color: inherit;
}

.jdGallery a.right, .jdGallery a.left
{
	position: absolute;
	height: 99%;
	width: 25%;
	cursor: pointer;
	z-index:10;
	filter:alpha(opacity=20);
	-moz-opacity:0.2;
	-khtml-opacity: 0.2;
	opacity: 0.2;
}

* html .jdGallery a.right, * html .jdGallery a.left
{
	filter:alpha(opacity=50);
}

.jdGallery a.right:hover, .jdGallery a.left:hover
{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

.jdGallery a.left
{
	left: 0;
	top: 0;
	background: url('img/fleche1.png') no-repeat center left;
}

* html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }

.jdGallery a.right
{
	right: 0;
	top: 0;
	background: url('img/fleche2.png') no-repeat center right;
}

* html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }

.jdGallery a.open
{
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.withArrows a.open
{
	position: absolute;
	top: 0;
	left: 25%;
	height: 99%;
	width: 50%;
	cursor: pointer;
	z-index: 10;
	background: none;
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

.withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }

* html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
	filter:alpha(opacity=80); }
	
	
/* Gallery Sets */

.jdGallery a.gallerySelectorBtn
{
	z-index: 15;
	position: absolute;
	top: 0;
	left: 30px;
	height: 20px;
	/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
	text-align: center;
	padding: 0 10px;
	font-size: 13px;
	background: #333;
	color: #fff;
	cursor: pointer;
	opacity: .4;
	-moz-opacity: .4;
	-khtml-opacity: 0.4;
	filter:alpha(opacity=40);
}

.jdGallery .gallerySelector
{
	z-index: 20;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
}

.jdGallery .gallerySelector h2
{
	margin: 0;
	padding: 10px 20px 10px 20px;
	font-size: 20px;
	line-height: 30px;
	color: #fff;
}

.jdGallery .gallerySelector .gallerySelectorWrapper
{
	overflow: hidden;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
	margin-left: 10px;
	margin-top: 10px;
	border: 1px solid #888;
	padding: 5px;
	height: 40px;
	color: #fff;
	cursor: pointer;
	float: left;
}

.jdGallery .gallerySelector .gallerySelectorInner div.hover
{
	background: #333;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
	background: #000;
	background-position: center center;
	float: left;
	border: none;
	width: 40px;
	height: 40px;
	margin-right: 5px;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
	margin: 0;
	padding: 0;
	font-size: 25px;
	font-weight: normal;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
	color: #aaa;
}

Maik · 3. März 2010

Du könntest hier die Sichtbarkeit (display:none vs. display:block) der Galerie steuern.

http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload

Javascript:

function tuwas() {
    ...
}
window.onload = tuwas;

mfg Maik

Frosty5o · 3. März 2010

Ah lol ok sorry, warn grober Denkfehler, habs mit jetz duchgelesen weiß aber nicht wie ichs funktionsfähig einfüg...!

Dies wär der js code:

HTML:

<script type="text/javascript">
        function startGallery() {
                 var myGallery = new gallery($('myGallery'), {
                     timed: true
                 });
        }
        window.addEvent('domready',startGallery);
</script>

##EDIT##

Hm, haut irgendwie nicht so hin wie ich es mir vorstelle, entweder ich binde das command falsch ein oder es funktioniert einfach nicht!

Maik · 3. März 2010

Frosty5o hat gesagt.:
##EDIT##

Hm, haut irgendwie nicht so hin wie ich es mir vorstelle, entweder ich binde das command falsch ein oder es funktioniert einfach nicht!

Dürfen wir jetzt raten, oder sollen wir die Glaskugel befragen, wie dein Versuch konkret aussieht?

mfg Maik

Frosty5o · 3. März 2010

Natürlich nicht, sorry!

HTML:

<script type="text/javascript">
        function startGallery() {
                 var myGallery = new gallery($('myGallery'), {
                     timed: true
                 });
        }
        window.addEvent('domready',startGallery);
        window.onload(startGallery);
</script>

Maik · 3. März 2010

Fällt dir hier nichts auf?

Maik hat gesagt.:
Javascript:

function tuwas() { ... } window.onload = tuwas;

Frosty5o hat gesagt.:

HTML:

<script type="text/javascript">
        function startGallery() {
                 var myGallery = new gallery($('myGallery'), {
                     timed: true
                 });
        }
        window.addEvent('domready',startGallery);
        window.onload(startGallery);
</script>

mfg Maik

Frosty5o · 3. März 2010

So meinst du?

HTML:

<script type="text/javascript">
        function startGallery() {
                 var myGallery = new gallery($('myGallery'), {
                     timed: true
                 });
        }
        window.addEvent('domready',startGallery);
	 window.onload = startGallery;
     </script>

So wird sie leider nicht mehr korrekt angezeigt... wobei das genannte Problem trotzdem besteht!

##EDIT##

So hab das problem doch mit Hilfe der .css gelöst. Für alle die das selbe Problem haben. Einfach "display: none;" in die .css einfügen dann gehts.

Trotzdem nochmal danke für die Bemühungen!

✔ JD Gallery Anzeige beim Laden!

Frosty5o

Mitglied

Maik

Frosty5o

Mitglied

Maik

Frosty5o

Mitglied

Maik

Frosty5o

Mitglied

Maik

Frosty5o

Mitglied

Neue Beiträge