Album: wie ohne Vorschaubilder direkt zum ersten grossen Bild?

[meckie]

Hallo, eine wahrscheinlich dumme Anfängerfrage, aber ich komm nicht drauf:

Wie kann ich vom Album-Vorschaubild ohne Umweg über alle Vorschaubilder (Übersichtsseite) direkt das erste Bild gross gezeigt bekommen?

Benutze Lightbox.

Könnte auch das Gallery-Modul verwenden, bräuchte nur verschiedene Alben. Hab da nicht gefunden, wie man nur das Vorschaubild EINES Albums anzeigt.

Danke für die Hilfe, ein CMSMS Anfänger... 

[meckie]

Hallo,

hab mich jetzt 4 Stunden damit beschäftigt und komm nicht drauf. Hab auch die Suche hier im Forum extensiv benutzt aber keine Antwort darauf gefunden. Hatte zuerst das Gallery-Modul installiert, danach wieder deinstalliert, weil ich gelesen hatte, dass das Album-Modul mehr Funktionen hatte, damit gings auch nicht, woraufhin ich jetzt wieder Gallery installiert habe.

Kann mir wirklich niemend eine Antwort geben oder geht das gar nicht umzusetzen?
Ich möchte doch nur eine Galerie mit verschiedenen Alben aber ohne Vorschaubilder haben. Geht das nicht mit CMSMS-Modulen?
edit:wech

Bitte helft mir, ich weiss wirklich nicht, was ich noch probieren soll...

Hab jetzt das Modul so aufgerufen:

Code: Select all

{Gallery dir='Fahrzeuge'   number="1"  }

aber das bewirkt, dass auch in der Grossansicht nur ein Bild zu sehen ist, ich möchte aber dass dort alle Bilder zu sehen sind.
wenn ich number="1" weglasse, dann bekomme ich mehrere Thumnails auf der Seite - es soll aber nur eines sein.

Ich weiss nicht, ob das verständlich erklärt ist... also es soll nur ein Bild als "Album-Thumbnail" angezeigt werden, klickt man dann da drauf, soll die Lightbox mit allen Bildern aufgehen. Ist das nicht möglich?

Vielen Dank für jede Hilfe!

[meckie]

Anscheinend ists ja doch nicht eine Anfängerfrage, wenn hier schon 18 Leute meinen Post angesehen haben aber keiner eine Antwort weiss...

Leider kann ich kein Smarty, sonst wüsste ich, wie das Modul aufgerufen wird und könnte hier eventuell das betreffende ändern:

Code: Select all

{foreach from=$images item=image}
	<div class="img">
	{if $image->isdir}
		<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}" alt="{$image->title}" /></a><br />
		{$image->title}
	{else}
   <a href="{$image->file}" title="{$image->title}" class="thickbox" rel="gallery"><img src="{$image->thumb}" alt="{$image->title}" /></a>
	{/if}
	</div>
{/foreach}
<div class="galleryclear"> </div>
</div>

Übrigens hab ich noch ein Problem bemerkt: die Lightbox funktioniert bei mir nicht so, wie sie sollte, das heisst, statt dem verdunkelten Bildschirm krieg ich im Browser einfach nur das Bild alleine angezeigt. Die Thickbox geht aber. Nur da verdunkelt sich der Bildschirm aussenrum noch nicht.

Ich benutze übrigens Version 1.6.6.

[konsument]

Ich bin kein Progger, aber diese unelegante Lösung sollte funktionieren. Damit blendest du einfach alle Bilder die nach dem ersten kommen mittels CSS aus. Meinem Verständnis nach muss die Schleife die Bilder komplett durchlaufen, da sie sonst in der Dia-Show auch nicht dargestellt werden:

Code: Select all

{foreach from=$images item=image}
{counter assign=count_images}
	<div class="img" {if $count_images > '1'}style="display:none"{/if}>
	{if $image->isdir}
		<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}" alt="{$image->title}" /></a><br />
		{$image->title}
	{else}
   <a href="{$image->file}" title="{$image->title}" class="thickbox" rel="gallery"><img src="{$image->thumb}" alt="{$image->title}" /></a>
	{/if}
	</div>
{/foreach}
<div class="galleryclear"> </div>
</div>

Übrigens hab ich noch ein Problem bemerkt: die Lightbox funktioniert bei mir nicht so, wie sie sollte, das heisst, statt dem verdunkelten Bildschirm krieg ich im Browser einfach nur das Bild alleine angezeigt. Die Thickbox geht aber. Nur da verdunkelt sich der Bildschirm aussenrum noch nicht.

Ich benutze übrigens Version 1.6.6.

Hast du auch die Scripts auf dem Server geladen und richtig verlinkt?

[meckie]

Hallo Konsument,

leider werden mir trotz
'1'}style="display:none"{/if}>
alle Thumbnails auf der Seite angezeigt:
edit:wech

Ich hab das Template übers Backend verlinkt (grüner Haken gesetzt).

hmmm...

[konsument]

Welches Modul verwendest du jetzt - Album oder Gallery?

Ich habe das mit Gallery und dem Fancybox-Template versucht. Bei mir hats funktioniert.

[NaN]

Wieso verlinkst Du nicht einfach direkt auf das Bild?
Wozu über die Gallery gehen, wenn es eh nur ein Bild sein soll?

[konsument]

Wieso verlinkst Du nicht einfach direkt auf das Bild?
Wozu über die Gallery gehen, wenn es eh nur ein Bild sein soll?

So wie ich ihn verstanden habe, will er durch Klick auf das Albumvorschaubild gleich das Album in der Lightbox laden ohne erst auf die Übersichtsseite des ausgewählten Albums zu kommen.

[meckie]

Hallo Nan,

ich glaube ich hab mich nicht richtig ausgedrückt:
in der Galerie-Ansicht sollens ja alle Bilder sein, nur in der Thumbnail-Ansicht soll nur eines kommen.

Benutze Gallery.

Habe auch Jos, den Autor von Gallery mal kontaktiert und diesen Lösungsvorschlag bekommen:

Hi Jos,

thank you! I did the following:

Code: Select all

<div class="gallery">
{if !empty($module_message)}<h4>{$module_message|escape}</h4>{/if}
{if !empty($gallerytitle)}<h3>{$gallerytitle}</h3>{/if}
{if !empty($gallerycomment)}<div class="gallerycomment">{$gallerycomment}</div>{/if}
<p>{$imagecount}</p>
<div class="pagenavigation">
{if $pages > 1}
<div class="prevpage">{$prevpage}</div>
<div class="nextpage">{$nextpage}</div>
{/if}
{if !$hideparentlink && !empty($parentlink)}<div class="parentlink">{$parentlink}</div>{/if}
{if $pages > 1}<div class="pagelinks">{$pagelinks}</div>{/if}
</div>


{assign var='firstimage' value='1'}
{foreach from=$images item=image}
	<div class="img">
	{if $image->isdir}
		<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}" alt="{$image->title}" /></a><br />
		{$image->title}
	{elseif $firstimage}
   <a href="{$image->file}" title="{$image->title}" rel="lightbox[gallery]"><img src="{$image->thumb}" alt="{$image->title}" /></a>
	{assign var='firstimage' value='0'}
	{else}
   <a class="hide" href="{$image->file}" title="{$image->title}" rel="lightbox[gallery]">{* no thumb here *}</a>
	{/if}
	</div>
{/foreach}

and

Code: Select all

.gallery .img .hide{  display: none; }

and

Code: Select all

<__script__ type="text/javascript" src="modules/Gallery/templates/lightbox/js/prototype.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/lightbox/js/scriptaculous.js?load=effects,builder"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/lightbox/js/lightbox.js"></__script>

and it looks like this:

edit:wech

Probably this is the reason:

First of all you do a call to jQuery two times, that could cause some trouble.

but I dont know how to fix it. What could I do?

Really, thanks a lot for your help and time, now you have a beer here in Berlin waiting for you, if you should come here

Leider funktionierts immer noch nicht, wie man hier sieht:

edit:wech

[konsument]

Irgendwas scheinst du falsch zu machen.

Schau mal hier: Edit: wech

Ich verwende hierfür Gallery mit Fancybox und den Code den ich weiter oben gepostet habe. So willst du es doch haben oder?

[meckie]

JA! genau so solls aussehen!

[meckie]

Ich nehme an, es liegt daran, dass schonmal ein jquery für das Headbild verwendet wurde. Das wird jetzt zweimal aufgerufen und kommt sich irgendwie in die Quere. Leider hab ich keine Ahnung, wie ich das ändern kann ....
Weiss jemand Rat? Ich hab schonmal einfach aus dem Gallery-Template die Java-Script-Aufrufe rausgelöscht, aber das hat leider nichts bewirkt...

[NaN]

Starte mal Firefox und öffne die Fehlerkonsole (Unter Extras).
Dann lade Deine Seite neu und Du wirst sehen, dass da ein paar Javascriptfehler auftreten weshalb die Fancybox nicht ausgeführt wird.

Das lang Attribut im html Tag ist doppelt drin.

Außerdem hast Du die jquery Libary ebenfalls doppelt (EDIT: Nein dreifach) drin.
Einmal von googleapis und einmal von Deinem Server (Gallery Template).
Und dann nochmal von Deinem Server (uploads/images/stuff )
Für eines von denen musst Du Dich entscheiden.
Solltest Du Dich für jquery von Deinem Server entscheiden, nimm es aus Dem Gallery Template (oder Seitentemplate) heraus und pack es in Dein Seitentemplate vor jquerycssmenu.

[meckie]

ok, bis jetzt sieht meine Template-Datei folgendermassen aus:

Code: Select all

{process_pagedata}<!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" xml:lang="{$lang_parent}" lang="{$lang_parent}" >
{* Change lang="en" to the language of your site *}

<head>
{if isset($canonical)}<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />{/if}

<title>{title} | {sitename}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{stylesheet}
{* This is how all the stylesheets attached to this template are linked to *}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optmization *}

 <!--[if IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{*The above JavaScript is required for Menu - NCleanBlue-css to work in IE6 *}

{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
{* IE6 png fix *}
{literal}
<!--[if IE 6]>
<__script__ type="text/javascript"  src="uploads/NCleanBlue/js/ie6fix.js"></__script>

<__script__ type="text/javascript">

 // argument is a CSS selector
 DD_belatedPNG.fix('.sbar-top,.sbar-bottom,.main-top,.main-bottom,#version');
</__script>

{global_content name='networksscript'}

<style type="text/css">

/* enable background image caching in IE6 */
html {filter:expression(document.execCommand("BackgroundImageCache", false, true));} 
</style>
<![endif]-->
{/literal}

{literal}
<!--[if lte IE 7]>
<style type="text/css">
html .jquerycssmenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
{/literal}
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></__script>
<__script__ type="text/javascript" src="uploads/images/stuff/jquerycssmenu.js"></__script>


<link rel="shortcut icon" href="favicon.ico" >
   <link rel="icon" type="image/gif" href="animated_favicon1.gif" >

</head>

und im Gallery-Template wird verwendet:

Code: Select all

<__script__ type="text/javascript" src="modules/Gallery/templates/jquery/jquery.js"></__script><__script__ type="text/javascript" src="modules/Gallery/templates/fancybox/jquery.fancybox.pack.js"></__script>
<__script__ type="text/javascript" src="modules/Gallery/templates/jquery/jquery.mousewheel.pack.js"></__script>

<__script__ type="text/javascript">
$(document).ready(function() {
	$("a.group").fancybox({
		'speedIn':		300,
		'speedOut':	300,
		'overlayColor':	'#000',
		'overlayOpacity':	0.7
	});
});
</__script>

Sorry für die Anfängerfrage, aber wo soll ich was jetzt rausnehmen?
Mann, ich kenn mit der Materie halt kaum aus.
Vielen herzlichen Dank für Eure Hilfe!

[cyberman]

Auf jeden Fall aus dem Gallery-Template ... sie wurde ja bereits im head geladen.