Forum für CMS/made simple

Henk1060

Server-Pate

Registriert: 12. August 2011

Beiträge: 632

[GELÖST] Modul Gallery mit Touch einfach gelöst.

Hy Leute,

Habe zwar einiges gefunden für eine Mobile Lösung auch hier im Forum.
Aber das finde ich irgendwie am besten und die schnellste Lösung.

Obwohl die Lösung von der ToolBox mit der AutolightBox auch genial finde, vielleicht kommt da mal ein Plugin oder sowas für die Gallery
Gibt es hier http://www.cmsmadesimple.de/forum/viewtopic.php?id=3189

Man braucht nur 2 bis 3 Java Skripte einbauen
einmal Jquery wenn ihr es noch nicht am laufen habt und einmal eine Touch.js
Anleitung und Demo gibts auch hier.
http://tutorialzine.com/2012/04/mobile-touch-gallery/

Hier eine Anleitung falls es wir im Gallery Modul umsetzen möchte.
Pfade müssen evtl. bei euch angepasst werden.

Neues Template in der Gallery anlegen.
Template-Quell Code.

 Hier klicken, um den Code zum Kopieren zu markieren

<div class="thumbs">

{if !empty($module_message)}<h2>{$module_message|escape}</h2>{/if}
{if !empty($gallerytitle)}<h2>{$gallerytitle}</h2>{/if}
{if !empty($gallerycomment)}<p>{$gallerycomment}</p>{/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>

{foreach from=$images item=image}
  {if $image->isdir}<a href="{$image->file}" ><img src="{$image->thumb}" /></a><br />{$image->titlename}
{else}

    <a href="{$image->file}" title="" >
    <img src="{$image->thumb}" alt="{$image->titlename}"  width="120" height="120">
    </a>
  
{/if}
{/foreach}

<div class="galleryclear">&nbsp;</div>
</div>

Stylesheet

 Hier klicken, um den Code zum Kopieren zu markieren

/* The gallery overlay */  #galleryOverlay{ 	width:100%; 	height:100%; 	position:fixed; 	top:0; 	left:0; 	opacity:0; 	z-index:100000; 	background-color:#222; 	background-color:rgba(0,0,0,0.8); 	overflow:hidden; 	display:none; 	 	-moz-transition:opacity 1s ease; 	-webkit-transition:opacity 1s ease; 	transition:opacity 1s ease; }  /* This class will trigger the animation */  #galleryOverlay.visible{ 	opacity:1; }  #gallerySlider{ 	height:100%; 	 	left:0; 	top:0; 	 	width:100%; 	white-space: nowrap; 	position:absolute; 	 	-moz-transition:left 0.4s ease; 	-webkit-transition:left 0.4s ease; 	transition:left 0.4s ease; }  #gallerySlider .placeholder{ 	background: url("preloader.gif") no-repeat center center; 	height: 100%; 	line-height: 1px; 	text-align: center; 	width:100%; 	display:inline-block; }  /* The before element moves the  * image halfway from the top */  #gallerySlider .placeholder:before{ 	content: ""; 	display: inline-block; 	height: 50%; 	width: 1px; 	margin-right:-1px; }  #gallerySlider .placeholder img{ 	display: inline-block; 	max-height: 100%; 	max-width: 100%; 	vertical-align: middle; }  #gallerySlider.rightSpring{ 	-moz-animation: rightSpring 0.3s; 	-webkit-animation: rightSpring 0.3s; }  #gallerySlider.leftSpring{ 	-moz-animation: leftSpring 0.3s; 	-webkit-animation: leftSpring 0.3s; }  /* Firefox Keyframe Animations */  @-moz-keyframes rightSpring{ 	0%{		margin-left:0px;} 	50%{	margin-left:-30px;} 	100%{	margin-left:0px;} }  @-moz-keyframes leftSpring{ 	0%{		margin-left:0px;} 	50%{	margin-left:30px;} 	100%{	margin-left:0px;} }  /* Safari and Chrome Keyframe Animations */  @-webkit-keyframes rightSpring{ 	0%{		margin-left:0px;} 	50%{	margin-left:-30px;} 	100%{	margin-left:0px;} }  @-webkit-keyframes leftSpring{ 	0%{		margin-left:0px;} 	50%{	margin-left:30px;} 	100%{	margin-left:0px;} }  /* Arrows */  #prevArrow,#nextArrow{ 	border:none; 	text-decoration:none; 	background:url('arrows.png') no-repeat; 	opacity:0.5; 	cursor:pointer; 	position:absolute; 	width:43px; 	height:58px; 	 	top:50%; 	margin-top:-29px; 	 	-moz-transition:opacity 0.2s ease; 	-webkit-transition:opacity 0.2s ease; 	transition:opacity 0.2s ease; }  #prevArrow:hover, #nextArrow:hover{ 	opacity:1; }  #prevArrow{ 	background-position:left top; 	left:40px; }  #nextArrow{ 	background-position:right top; 	right:40px; }   /*------------------------- 	Simple reset --------------------------*/  *{ 	margin:0; 	padding:0; }   /*------------------------- 	General Styles --------------------------*/  .thumbs{ 	width:480px; 	margin:60px auto 35px; 	text-align:center; }  .thumbs a{ 	width:120px; 	height:120px; 	display:inline-block; 	border:3px solid #E5E5E5; 	box-shadow:0 1px 1px rgba(0,0,0,0.5); 	border-radius:4px; 	margin: 6px 6px 6px; 	position:relative; 	text-decoration:none; 	 	background-position:center center; 	background-repeat: no-repeat; 	 	background-size:cover; 	-moz-background-size:cover; 	-webkit-background-size:cover; }  .thumbs a:after{ 	 }  @media screen and (max-width: 960px) { 	.thumbs, #credit{ 		width:auto; 	} 	 	footer{ 		display:none; 	} 	 	#bsaHolder{ 		display:none; 	} }

JavaScript Einbindung
Endweder das Jquery Verwenden oder das ihr am Laufen habt.
Die beiden andern .js Datein könnt ihr euch hier downloaden.
http://tutorialzine.com/2012/04/mobile-touch-gallery/

 Hier klicken, um den Code zum Kopieren zu markieren

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
		<script src="assets/touchTouch/touchTouch.jquery.js"></script>
		<script src="assets/js/script.js"></script>

Vielleicht kann es ja einer mal brauchen...

Beitrag geändert von Henk1060 (02. April 2014 09:55)