fw-thomas
Beiträge: 323
Registriert: 11. Nov 2008, 10:01
Wohnort: Friesland
Kontaktdaten: Website

Galerie Modul

12. Nov 2017, 02:22

Hallo zusammen,
ich habe unter Redaxo 5.4 das Galerie Modul.
Wenn ich damit ein Bild einbinde klappt das auch soweit, es wird in verkleinerter Form angezeigt, Klicke ich es an, bekomme ich das Bild als Vollbild angezeigt, und die Webseite ist weg.

Anbei der Quelltext der Ausgabe

Code: Alles auswählen

<?php
if ("REX_MEDIALIST[1]" != '') {

	$pics_per_row = '';
	switch ("REX_VALUE[1]") {
	case '2':
	   $pics_per_row = 'col-md-6 col-sm-12';
	   break;

	case '3':
	   $pics_per_row = 'col-md-4 col-sm-12';
	   break;

	case '4':
	   $pics_per_row = 'col-md-3 col-sm-6';
	   break;
	}
	
	$imagelist = explode(',', "REX_MEDIALIST[1]");
	
	echo '
	<!-- gallery -->
	<!-- Root element von PhotoSwipe. Muss die Klasse pswp haben. -->
	<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
	
		<!-- Hintergrund von PhotoSwipe.
		Ein separates Element, das Animieren von opacity schneller ist als rgba(). -->
		<div class="pswp__bg"></div>
	
		<!-- Slides wrapper with overflow:hidden. -->
		<div class="pswp__scroll-wrap">
	
			<!-- Container that holds slides.
			PhotoSwipe hält nur 3 im DOM, um Speicher zu sparen.
			Nicht diese 3 pswp__item Elemente verändern, weil die Daten später modifiziert werden. -->
			<div class="pswp__container">
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
				<div class="pswp__item"></div>
			</div>
	
			<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
			<div class="pswp__ui pswp__ui--hidden">
	
				<div class="pswp__top-bar">
	
					<!--  Controls are self-explanatory. Order can be changed. -->
					<div class="pswp__counter"></div>
	
					<button class="pswp__button pswp__button--close" title="Schließen (Esc)"></button>
					<button class="pswp__button pswp__button--share" title="Teilen"></button>
					<button class="pswp__button pswp__button--fs" title="Vollbild"></button>
					<button class="pswp__button pswp__button--zoom" title="Vergrößern / Verkleinern"></button>
	
					<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
					<!-- element will get class pswp__preloader--active when preloader is running -->
					<div class="pswp__preloader">
						<div class="pswp__preloader__icn">
						  <div class="pswp__preloader__cut">
							<div class="pswp__preloader__donut"></div>
						  </div>
						</div>
					</div>
				</div>
	
				<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
					<div class="pswp__share-tooltip"></div>
				</div>
	
				<button class="pswp__button pswp__button--arrow--left" title="Zurück (Pfeil links)"></button>
				<button class="pswp__button pswp__button--arrow--right" title="Weiter (Pfeil rechts)"></button>
	
				<div class="pswp__caption">
					<div class="pswp__caption__center"></div>
				</div>
	
			</div>
		</div>
	</div>
	
	<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
		<div class="row">';
	
			foreach ($imagelist as $file) {
				$media = rex_media::get($file);
				if ($media) {
				
					$mediatitle = $media->getValue('title');
					$mediadesc = str_replace(array("\r\n", "\n", "\r"), ' ', $media->getValue('med_description'));

					$pic = rex_path::media($file);
					$size = getimagesize($pic);
					$width = $size[0];
					$height = $size[1];
								
					echo '
					<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject" class="'.$pics_per_row.' gallery-item">
						<a href="'.rex_url::base('media/'.$file).'" itemprop="contentUrl" data-size="'.$width.'x'.$height.'">
							<img src="'.rex_url::base('index.php?rex_media_type=thumb&rex_media_file='.$file.'').'" itemprop="thumbnail" alt="'.$mediadesc.'" class="img-rounded img-responsive" />
						</a>
						<figcaption itemprop="caption description" class="gallery-caption">'.$mediatitle.'</figcaption>
					</figure>';

				}
			}

		echo '
		</div>
	</div>
	<div class="clearfix"></div>
	<!-- end gallery -->';
}
?>
Jemand eine Idee, wo der Fehler liegen könnte

mfg
thomas

fw-thomas
Beiträge: 323
Registriert: 11. Nov 2008, 10:01
Wohnort: Friesland
Kontaktdaten: Website

Re: Galerie Modul

12. Nov 2017, 11:23

Anbei zwei Bilder zur besseren Darstellung
2017-11-12_10.16.43.jpg
2017-11-12_10.16.43.jpg (189.85 KiB) 171 mal betrachtet
Und Klicks eines der Bilder an, wird dieses nur als Vollbild angezeigt

Benutzeravatar
anita
Beiträge: 675
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

Re: Galerie Modul

12. Nov 2017, 18:16

hallo Thomas,

es fehlt die CSS-Datei von Photoswipe.
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com

fw-thomas
Beiträge: 323
Registriert: 11. Nov 2008, 10:01
Wohnort: Friesland
Kontaktdaten: Website

Re: Galerie Modul

12. Nov 2017, 19:55

Dann werde ich mal diese Datei nachher suchen

fw-thomas
Beiträge: 323
Registriert: 11. Nov 2008, 10:01
Wohnort: Friesland
Kontaktdaten: Website

Re: Galerie Modul

13. Nov 2017, 01:13

ich habe das an CSS-Datei von Photoswipe in der bass.css gefunden


Code: Alles auswählen

/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
        Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    -ms-touch-action: none;
    touch-action: none;
    z-index: 1500;
    -webkit-text-size-adjust: 100%;
    /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
    -webkit-backface-visibility: hidden;
    outline: none; }
.pswp * {
    box-sizing: border-box; }
.pswp img {
    max-width: none;
    border: 1px solid #717171;
    -webkit-box-shadow: 0px 0px 40px #A0A0A0;
    -moz-box-shadow: 0px 0px 40px #A0A0A0;
    box-shadow: 0px 0px 40px #A0A0A0 }

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
    /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
    opacity: 0.001;
    will-change: opacity;
    /* for open/close transition */
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--open {
    display: block; }

.pswp--zoom-allowed .pswp__img {
    /* autoprefixer: off */
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in; }

.pswp--zoomed-in .pswp__img {
    /* autoprefixer: off */
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab; }

.pswp--dragging .pswp__img {
    /* autoprefixer: off */
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing; }

/*
        Background is added as a separate element.
        As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(232, 231, 227, 0.96);
    opacity: 0;
    -webkit-backface-visibility: hidden;
    will-change: opacity; }

.pswp__scroll-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; }

.pswp__container,
.pswp__zoom-wrap {
    -ms-touch-action: none;
    touch-action: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; }

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
    -webkit-box-shadow: 0px 0px 5px #aaa;
    -moz-box-shadow: 0px 0px 5px #aaa;
    box-shadow: 0px 0px 5px #aaa;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }

.pswp__zoom-wrap {
    position: absolute;
    width: 100%;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    /* for open/close transition */
    transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp__bg {
    will-change: opacity;
    /* for open/close transition */
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
    -webkit-transition: none;
    transition: none; }

.pswp__container,
.pswp__zoom-wrap {
    -webkit-backface-visibility: hidden;
    will-change: transform; }

.pswp__item {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden; }

.pswp__img {
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
    position: absolute;
    width: auto;
    height: auto;
    top: 0;
    left: 0; }

/*
        stretched thumbnail or div placeholder element (see below)
        style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
    -webkit-backface-visibility: hidden; }

/*
        div element that matches size of large image
        large image loads on top of it
*/
.pswp__img--placeholder--blank {
    background: #222; }

.pswp--ie .pswp__img {
    width: 100% !important;
    height: auto !important;
    left: 0;
    top: 0; }

/*
        Error message appears when image is not loaded
        (JS option errorMsg controls markup)
*/
.pswp__error-msg {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    margin-top: -8px;
    color: #CCC; }

.pswp__error-msg a {
    color: #CCC;
    text-decoration: underline; }

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*

        Contents:

        1. Buttons
        2. Share modal and links
        3. Index indicator ("1 of X" counter)
        4. Caption
        5. Loading indicator
        6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*

        1. Buttons

*/
/* <button> css reset */
.pswp__button {
    width: 44px;
    height: 44px;
    position: relative;
    background: none;
    cursor: pointer;
    overflow: visible;
    -webkit-appearance: none;
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    opacity: 0.75;
    transition: opacity 0.2s;
    box-shadow: none; }
.pswp__button:focus, .pswp__button:hover {
    opacity: 1; }
.pswp__button:active {
    outline: none;
    opacity: 0.9; }
.pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0; }

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
    opacity: 1; }

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
    background: url("files/default-skin.png") 0 0 no-repeat;
    background-size: 264px 88px;
    width: 44px;
    height: 44px; }

@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
    /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
    .pswp--svg .pswp__button--arrow--right:before {
        background-image: url("files/default-skin.svg"); }

    .pswp--svg .pswp__button--arrow--left,
    .pswp--svg .pswp__button--arrow--right {
        background: none; } }
.pswp__button--close {
    background-position: 0 -44px; }

.pswp__button--share {
    background-position: -44px -44px; }

.pswp__button--fs {
    display: none; }

.pswp--supports-fs .pswp__button--fs {
    display: block; }

.pswp--fs .pswp__button--fs {
    background-position: -44px 0; }

.pswp__button--zoom {
    background-position: -88px 0;
    display: none; }

.pswp--zoom-allowed .pswp__button--zoom {
    display: block; }

.pswp--zoomed-in .pswp__button--zoom {
    background-position: -132px 0; }

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
    visibility: hidden; }

/*
        Arrow buttons hit area
        (icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    background: none;
    top: 50%;
    margin-top: -50px;
    width: 70px;
    height: 100px;
    position: absolute; }

.pswp__button--arrow--left {
    left: 0; }

.pswp__button--arrow--right {
    right: 0; }

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
    content: '';
    top: 35px;
    background-color: #e8e6e3;
    height: 30px;
    width: 32px;
    position: absolute; }

.pswp__button--arrow--left:before {
    left: 6px;
    background-position: -138px -44px; }

.pswp__button--arrow--right:before {
    right: 6px;
    background-position: -94px -44px; }

/*

        2. Share modal/popup and links

*/
.pswp__counter,
.pswp__share-modal {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none; }

.pswp__share-modal {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 10px;
    position: absolute;
    z-index: 1600;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    -webkit-backface-visibility: hidden;
    will-change: opacity; }

.pswp__share-modal--hidden {
    display: none; }

.pswp__share-tooltip {
    z-index: 1620;
    position: absolute;
    background: #FFF;
    top: 56px;
    border-radius: 2px;
    display: block;
    width: auto;
    right: 44px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    transform: translateY(6px);
    transition: transform 0.25s;
    -webkit-backface-visibility: hidden;
    will-change: transform; }
.pswp__share-tooltip a {
    display: block;
    padding: 8px 12px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px; }
.pswp__share-tooltip a:hover {
    text-decoration: none;
    color: #000; }
.pswp__share-tooltip a:first-child {
    /* round corners on the first/last list item */
    border-radius: 2px 2px 0 0; }
.pswp__share-tooltip a:last-child {
    border-radius: 0 0 2px 2px; }

.pswp__share-modal--fade-in {
    opacity: 1; }
.pswp__share-modal--fade-in .pswp__share-tooltip {
    transform: translateY(0); }

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
    padding: 16px 12px; }

a.pswp__share--facebook:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: -12px;
    right: 15px;
    border: 6px solid transparent;
    border-bottom-color: #FFF;
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none; }
a.pswp__share--facebook:hover {
    background: #3E5C9A;
    color: #FFF; }
a.pswp__share--facebook:hover:before {
    border-bottom-color: #3E5C9A; }

a.pswp__share--twitter:hover {
    background: #55ACEE;
    color: #FFF; }

a.pswp__share--pinterest:hover {
    background: #CCC;
    color: #CE272D; }

a.pswp__share--download:hover {
    background: #DDD; }

/*

        3. Index indicator ("1 of X" counter)

*/
.pswp__counter {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    font-size: 16px;
    line-height: 44px;
    color: #66615b;
    opacity: 1;
    padding: 5px 20px; }

/*

        4. Caption

*/
.pswp__caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 44px; }
.pswp__caption small {
    font-size: 12px;
    color: #a49e93; }

.pswp__caption__center {
    text-align: left;
    max-width: 420px;
    margin: 0 auto;
    font-size: 1.25em;
    padding: 30px;
    line-height: 1.5em;
    color: #66615b;
    text-align: center; }

.pswp__caption--empty {
    display: none; }

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
    visibility: hidden; }

/*

        5. Loading indicator (preloader)

        You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

*/
.pswp__preloader {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -22px;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    will-change: opacity;
    direction: ltr; }

.pswp__preloader__icn {
    width: 20px;
    height: 20px;
    margin: 12px; }

.pswp__preloader--active {
    opacity: 1; }
.pswp__preloader--active .pswp__preloader__icn {
    /* We use .gif in browsers that don't support CSS animation */
    background: url("files/preloader.gif") 0 0 no-repeat; }

.pswp--css_animation .pswp__preloader--active {
    opacity: 1; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
    animation: clockwise 500ms linear infinite; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
    animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
.pswp--css_animation .pswp__preloader__icn {
    background: none;
    opacity: 0.75;
    width: 14px;
    height: 14px;
    position: absolute;
    left: 15px;
    top: 15px;
    margin: 0; }
.pswp--css_animation .pswp__preloader__cut {
    /*
          The idea of animating inner circle is based on Polymer ("material") loading indicator
           by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
    */
    position: relative;
    width: 7px;
    height: 14px;
    overflow: hidden; }
.pswp--css_animation .pswp__preloader__donut {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border: 2px solid #FFF;
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    background: none;
    margin: 0; }

@media screen and (max-width: 1024px) {
    .pswp__preloader {
        position: relative;
        left: auto;
        top: auto;
        margin: 0;
        float: right; } }
@keyframes clockwise {
    0% {
        transform: rotate(0deg); }
    100% {
        transform: rotate(360deg); } }
@keyframes donut-rotate {
    0% {
        transform: rotate(0); }
    50% {
        transform: rotate(-140deg); }
    100% {
        transform: rotate(0); } }
/*

        6. Additional styles

*/
/* root element of UI */
.pswp__ui {
    -webkit-font-smoothing: auto;
    visibility: visible;
    opacity: 1;
    z-index: 1550; }

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 44px;
    width: 100%; }

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    -webkit-backface-visibility: hidden;
    will-change: opacity;
    transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
    visibility: visible; }

.pswp__top-bar,
.pswp__caption {
    background-color: rgba(232, 231, 227, 0.96); }

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
    background-color: rgba(232, 231, 227, 0.96); }

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
    opacity: 0; }
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
    opacity: 0; }

/*
        pswp__ui--hidden class is added when controls are hidden
        e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
    /* Force paint & create composition layer for controls. */
    opacity: 0.001; }

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
    display: none; }

.pswp__element--disabled {
    display: none !important; }

.pswp--minimal--dark .pswp__top-bar {
    background: none; }

.gallery-item {
    margin-bottom: 10px;
}
.gallery-item .vertical-image {
    height: 350px; }
.gallery-item .small-image {
    height: 175px; }
.gallery-item .gallery-caption {
    margin-top: 8px;
    font-size: 13px;
    text-align: center; }

.gallery-item img {
    border: 1px solid #717171;
    -webkit-box-shadow: 0px 0px 10px #A0A0A0;
    -moz-box-shadow: 0px 0px 10px #A0A0A0;
    box-shadow: 0px 0px 10px #A0A0A0;
    margin: 0 auto !important;
}

.card-wrapper {
    padding-top: 40px;
    padding-bottom: 30px;
}
.card-wrapper.top {
    padding-bottom: 0;
}
.card-wrapper.bottom {
    padding-top: 0;
}
.card-wrapper.no-distance {
    padding-top: 0;
    padding-bottom: 0;
}
.card-wrapper.top .card,
.card-wrapper.no-distance .card {
    margin-bottom: 30px;
}
.card {
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5);
    background-color: #FFFFFF;
    color: #252422;
    margin-bottom: 50px;
    position: relative;
    z-index: 1; }
.card-user {
    border: 1px solid #ccc; }
.card .title,
.card .stats,
.card .category,
.card p,
.card .social-line,
.card .actions,
.card .content,
.card .card-footer,
.card small,
.card a {
    position: relative;
    z-index: 3; }
.card a {
    color: #444444; }
.card a:hover, .card a:focus {
    color: #333333; }
.card img {
    max-width: 100%;
    height: auto; }
.card[data-radius="none"] {
    border-radius: 0px; }
.card[data-radius="none"] .header {
    border-radius: 0px 0px 0 0; }
.card[data-radius="none"] .header img {
    border-radius: 0px 0px 0 0; }
.card.card-plain {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0; }
.card.card-with-shadow {
    box-shadow: 0 20px 16px -15px rgba(165, 165, 165, 0.57); }
.card .btn {
    text-shadow: none;
    font-weight: bold; }
.card .title-uppercase {
    text-transform: uppercase; }
.card .header {
    position: relative;
    border-radius: 3px 3px 0 0;
    z-index: 3; }
.card .header.header-with-icon {
    height: 150px; }
.card .header img {
    width: 100%;
    /*
                @include opacity(0);
                display: none;
    */ }
.card .header .category {
    padding: 15px; }
.card .content .price {
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: white;
    border-radius: 50%;
    width: 152px;
    height: 152px;
    margin: 30px auto;
    text-align: center;
    vertical-align: middle;
    line-height: 200px; }
.card .content .price h4 {
    margin: 5px 0 0;
    font-size: 36px; }
.card .content .price h6 {
    margin-top: 45px;
    font-size: 16px; }
.card .content .price .currency {
    font-size: 22px;
    font-weight: normal; }
.card .actions {
    padding: 10px 15px; }
.card .more {
    float: right;
    z-index: 4;
    display: block;
    padding-top: 10px;
    padding-right: 10px;
    position: relative; }
.card .filter,
.card .header .actions {
    position: absolute;
    z-index: 2;
    background-color: rgba(0, 0, 0, 0.76);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0; }
.card .header .actions {
    background-color: transparent;
    z-index: 3; }
.card .header .actions .btn {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
.card:hover .filter {
    opacity: 0.7; }
.card:hover .header .social-line,
.card:hover .header .actions {
    opacity: 1; }
.card .category,
.card .label {
    font-size: 14px;
    margin-bottom: 0px; }
.card .category i,
.card .label i {
    font-size: 16px; }
.card .category {
    color: #ccc5b9; }
.card .label {
    text-shadow: none; }
.card .title {
    color: #252422; }
.card > .title {
    margin: 0;
    padding: 30px 0 0; }
.card .content {
    padding: 20px 20px 10px 20px; }
.card .content .title {
    margin: 10px 0 20px 0; }
.card .content .category ~ .title {
    margin-top: 10px; }
.card .content p ~ .title {
    margin-top: -10px; }
.card p {
    font-size: 16px;
    color: #66615b; }
.card h6 {
    font-size: 14px;
    margin: 0; }
.card .card-footer {
    padding: 15px 15px 20px; }
.card .card-footer .social-line .btn:first-child {
    border-radius: 0 0 0 6px; }
.card .card-footer .social-line .btn:last-child {
    border-radius: 0 0 6px 0; }
.card.card-separator:after {
    height: 100%;
    right: -15px;
    top: 0;
    width: 1px;
    background-color: #DDDDDD;
    content: "";
    position: absolute; }
.card .icon {
    display: block;
    margin: 0 auto;
    top: 60%;
    position: relative;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: center; }
.card .icon i {
    font-size: 60px;
    padding: 18px;
    width: 110px;
    border: 2px solid #ccc5b9;
    border-radius: 50%;
    height: 110px; }
.col-lg-4 .card .icon i {
    font-size: 80px;
    padding: 22px; }
.card.card-with-border .content {
    padding: 15px 15px 25px 15px; }
.card.card-with-border .card-footer {
    padding-bottom: 25px; }
.card.card-with-border:after {
    position: absolute;
    display: block;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    content: "";
    top: 5px;
    left: 5px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    z-index: 1;
    border-radius: 5px; }
.card.card-just-text .content {
    padding: 50px 65px;
    text-align: center; }
.card[data-background="image"] .image, .card[data-background="color"] .image {
    border-radius: 6px; }
.card[data-background="image"] .title, .card[data-background="color"] .title {
    font-weight: bold; }
.card[data-background="image"] .filter, .card[data-background="color"] .filter {
    border-radius: 6px; }
.card[data-background="image"] .title,
.card[data-background="image"] .stats,
.card[data-background="image"] .category,
.card[data-background="image"] p,
.card[data-background="image"] .content,
.card[data-background="image"] .card-footer,
.card[data-background="image"] small,
.card[data-background="image"] .content a, .card[data-background="color"] .title,
.card[data-background="color"] .stats,
.card[data-background="color"] .category,
.card[data-background="color"] p,
.card[data-background="color"] .content,
.card[data-background="color"] .card-footer,
.card[data-background="color"] small,
.card[data-background="color"] .content a {
    color: #FFFFFF; }
.card[data-background="image"] .content a:hover,
.card[data-background="image"] .content a:focus, .card[data-background="color"] .content a:hover,
.card[data-background="color"] .content a:focus {
    color: #FFFFFF; }
.card[data-background="image"] .icon i, .card[data-background="color"] .icon i {
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.6); }
.card[data-background="image"].card-with-border:after, .card[data-background="color"].card-with-border:after {
    border: 1px solid rgba(255, 255, 255, 0.45); }
.card[data-background="image"] {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.card[data-background="image"] .filter {
    opacity: 0.55; }
.card[data-background="image"]:hover .filter {
    opacity: 0.75; }
.card[data-color="blue"] {
    background: #b8d8d8; }
.card[data-color="blue"] .category {
    color: #7a9e9f; }
.card[data-color="blue"] p {
    color: #506568; }
.card[data-color="blue"] .icon i {
    color: #506568;
    border: 2px solid #7a9e9f; }
.card[data-color="green"] {
    background: #d5e5a3; }
.card[data-color="green"] .category {
    color: #92ac56; }
.card[data-color="green"] p {
    color: #60773d; }
.card[data-color="green"] .icon i {
    color: #60773d;
    border: 2px solid #92ac56; }
.card[data-color="yellow"] {
    background: #ffe28c; }
.card[data-color="yellow"] .category {
    color: #d88715; }
.card[data-color="yellow"] p {
    color: #b25825; }
.card[data-color="yellow"] .icon i {
    color: #b25825;
    border: 2px solid #d88715; }
.card[data-color="brown"] {
    background: #d6c1ab; }
.card[data-color="brown"] .category {
    color: #a47e65; }
.card[data-color="brown"] p {
    color: #75442e; }
.card[data-color="brown"] .icon i {
    color: #75442e;
    border: 2px solid #a47e65; }
.card[data-color="purple"] {
    background: #baa9ba; }
.card[data-color="purple"] .category {
    color: #5a283d; }
.card[data-color="purple"] p {
    color: #3a283d; }
.card[data-color="purple"] .icon i {
    color: #3a283d;
    border: 2px solid #5a283d; }
.card[data-color="orange"] {
    background: #ff8f5e; }
.card[data-color="orange"] .category {
    color: #e95e37; }
.card[data-color="orange"] p {
    color: #772510; }
.card[data-color="orange"] .icon i {
    color: #772510;
    border: 2px solid #e95e37; }

.btn-center {
    text-align: center; }

.card-big-shadow {
    max-width: 320px;
    position: relative; }
.card-big-shadow:before {
    background-image: url("files/shadow.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    bottom: -12%;
    content: "";
    display: block;
    left: -12%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0; }

.card-big-shadow.full-card {
    max-width: 100%; }

.card-image.card-big-shadow {
    max-width: 100%; }
.card-image .card {
    background-size: cover;
    min-height: 430px;
    width: 100%; }

.card-hover-effect {
    cursor: pointer;
    -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease;
    transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 200ms ease; }
.card-hover-effect:hover {
    box-shadow: 0px 12px 17px -7px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -moz-transform: translateY(-10px); }

.card-user .image {
    border-radius: 8px 8px 0 0;
    height: 150px;
    position: relative;
    overflow: hidden; }
.card-user .image img {
    width: 100%;
    height: 150px; }
.card-user .image-plain {
    height: 0;
    margin-top: 110px; }
.card-user .author {
    text-align: center;
    text-transform: none;
    margin-top: -65px; }
.card-user .author .title {
    color: #403D39; }
.card-user .author .title small {
    color: #ccc5b9; }
.card-user .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    margin-bottom: 15px; }
.card-user .avatar.border-white {
    border: 5px solid #FFFFFF; }
.card-user .avatar.border-gray {
    border: 5px solid #ccc5b9; }
.card-user .title {
    line-height: 24px; }
.card-user .content {
    min-height: 240px; }
.card-user.card-plain .avatar {
    height: 190px;
    width: 190px; }

.card-image .details {
    margin-left: 4px;
    min-height: 50px;
    padding: 0 4px 0.5em;
    position: relative; }
.card-image .details .author {
    margin-top: -21px; }
.card-image .details .author .name {
    color: #66615b;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.15;
    max-width: 11em;
    overflow: hidden;
    padding-top: 3px;
    text-overflow: ellipsis; }
.card-image .details .author .name:hover, .card-image .details .author .name:active, .card-image .details .author .name:focus {
    color: #403D39; }
.card-image .details .author img {
    height: 40px;
    width: 40px;
    margin-bottom: 5px; }
.card-image .details .meta {
    color: #ccc5b9;
    font-size: 0.8em; }
.card-image .details .actions {
    float: right;
    font-size: 0.875em;
    line-height: 2.6;
    position: absolute;
    right: 4px;
    top: 36px;
    z-index: 1; }
.card-image .details .actions .btn.btn-simple {
    padding-left: 2px; }
.card-image .details-center {
    text-align: center; }
.card-image .details-center .author {
    position: relative;
    display: inline-block;
    text-align: left;
    margin: 20px auto 0; }
.card-image .details-center .author img {
    position: absolute;
    left: 0;
    top: 0; }
.card-image .details-center .author .text {
    padding-left: 50px; }

.card-product .details .name {
    margin-top: 20px; }
.card-product .details p {
    display: inline-block;
    margin-right: 60px; }
.card-product .details .actions {
    top: 20px; }
.card-product .details .actions h5 {
    color: #403D39; }

.btn-file {
    position: relative;
    overflow: hidden;
    vertical-align: middle; }

.btn-file > input {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 23px;
    cursor: pointer;
    filter: alpha(opacity=0);
    opacity: 0;
    direction: ltr; }

Benutzeravatar
anita
Beiträge: 675
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

Re: Galerie Modul

13. Nov 2017, 15:25

in der init-gallery.js muss ein Fehler sein
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com

fw-thomas
Beiträge: 323
Registriert: 11. Nov 2008, 10:01
Wohnort: Friesland
Kontaktdaten: Website

Re: Galerie Modul

13. Nov 2017, 20:50

Suche die Datei nachher mal raus

Lg

Benutzeravatar
anita
Beiträge: 675
Registriert: 25. Jan 2007, 10:25
Wohnort: Finsterwalde

Re: Galerie Modul

14. Nov 2017, 11:40

ich habe sie einstweilen überschrieben, jedenfalls funzt es jetzt

für einzelne Bilder nimm lieber img-lightbox, das mach ich noch fertig
Gruß Anita

javanita engineering, immer eine zündende Idee
http://www.javanita.com

Zurück zu „Module/Aktionen [R5]“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste