Modul stage_sd - Bühne für den Seitenkopf

Alles rund um Module und Plugins in CONTENIDO 4.10.
Antworten
McHubi
Beiträge: 1196
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Modul stage_sd - Bühne für den Seitenkopf

Beitrag von McHubi » Mi 29. Mai 2019, 22:39

Hallo zusammen,

dieses Modul ist eine "klassische Stage" für den Seitenkopf und stellt Teaser dar, die nacheinander eingefadet oder eingeslidet werden. Dabei besteht die Möglichkeit, Zusatzinformationen über die jeweiligen Teaser zu legen und dabei alle Möglichkeiten des Tinymce zu nutzen. So lassen sich Fettungen, Links, Bulletpoints, Buttons usw. integrieren. Die Daten zu den einzelnen Teasern werden in separaten Webartikeln hinterlegt und ausgelesen. Der Wechsel der Teaser kann auf drei verschiedene Arten erfolgen: Klick auf die Navigationspfeile, Navigationsbullets und auf Touch-Devices per Swipe.

Einstellungen über den Artikelreiter "Konfiguration":
* Ein-/Ausblenden der gesamten Stage
* Animationsvariante Fading oder Sliding
* Auswahl der idcat mit den Teaserartikeln
* Sortierung der Teaser nach Titel, Erstellungsdatum oder Veröffentlichungsdatum des Webartikels mit den Teaserinfos - auf- oder absteigend
* Position der Beschreibung
* Darstellung der Navigationsicons auf den Slides ja/nein
* Darstellung der Navigationsbullets ja/nein
* Anzeigedauer der Teaser
* Dauer des Animationseffekts
* Höhe der Stage (in den Codes unten vorbereitet, aber auskommentiert)
* Darstellung des play/pause-Buttons ja/nein (in den Codes unten vorbereitet, aber auskommentiert)


INSTALLATION
1) Anlegen einer neuen Vorlage mit den Modulen content_image (Standardmodul des Demomandanten) und content_text
2) Anlegen einer eigenen Kategorie für die Ablage der Webartikel mit den Teaser-Infos
3) Anlegen der gewünschten Menge Teaser (Webartikel) in dieser Kategorie mit Bild und ggf. Text
4) Einbinden des Moduls "stage_sd" in der Vorlage in der die Stage eingebunden werden soll
5) Konfiguration des Moduls im Artikelreiter "Konfiguration" mit Angabe der ID-Cat der Kategorie in der die Teaser abgelegt sind
6) Ggf. Anpassung der CSS-Klassen an die eigenen Bedürfnisse


Modul-Eingabe

Code: Alles auswählen

/***********************************************
* CONTENIDO MODUL - INPUT
*
* Modulname   :     stage_sd
* Author(s)   :     Seamless-Design Markus Hübner
* Copyright   :     Markus Hübner
* Created     :     05/2019
* modified    :     02/2022 - added slider change via swipe gestures, second animation and minor fixes
************************************************/

echo '<table>';
echo '<tr><td>'.mi18n("input show stage").'</td><td>
  <input type="radio" name="CMS_VAR[10]" value="true"';
    if(CMS_VALUE[10]==true) echo ' checked="checked"';
    echo '>'.mi18n("input yes").'<br/>
  <input type="radio" name="CMS_VAR[10]" value="false"';
    if(CMS_VALUE[10]==false) echo ' checked="checked"';
echo '>'.mi18n("input no").'</td></tr>';

echo '<tr><td>'.mi18n("input animation type").'</td><td>
  <input type="radio" name="CMS_VAR[50]" value="fading"';
    if(CMS_VALUE[50]=="fading") echo ' checked="checked"';
    echo '>'.mi18n("input fading").'<br/>
  <input type="radio" name="CMS_VAR[50]" value="sliding"';
    if(CMS_VALUE[50]=="sliding") echo ' checked="checked"';
echo '>'.mi18n("input sliding").'</td></tr>';

echo '<tr><td>'.mi18n("input idcat slider articles").'</td><td><input size="2" type="text" name="CMS_VAR[100]" value="CMS_VALUE[100]"></td></tr>';

echo '<tr><td>'.mi18n("input sort articles by").'</td><td>
  <input type="radio" name="CMS_VAR[200]" value="title"';
    if(CMS_VALUE[200]=="title") echo ' checked="checked"';
    echo '>'.mi18n("input sort articles by title").'<br/>
  <input type="radio" name="CMS_VAR[200]" value="created"';
    if(CMS_VALUE[200]=="created") echo ' checked="checked"';
    echo '>'.mi18n("input sort articles by created").'<br/>
  <input type="radio" name="CMS_VAR[200]" value="published"';
    if(CMS_VALUE[200]=="published") echo ' checked="checked"';
    echo '>'.mi18n("input sort articles by published").'<br/>
  <br/>
  <input type="radio" name="CMS_VAR[210]" value="DESC"';
    if(CMS_VALUE[210]=="DESC") echo ' checked="checked"';
    echo '>'.mi18n("input sort articles descending").'<br/>
  <input type="radio" name="CMS_VAR[210]" value="ASC"';
    if(CMS_VALUE[210]=="ASC") echo ' checked="checked"';
    echo '>'.mi18n("input sort articles ascending").'
</td></tr>';

echo '<tr><td>'.mi18n("input slider description position").'</td><td>
  <input type="radio" name="CMS_VAR[400]" value="top"';
    if(CMS_VALUE[400]=="top") echo ' checked="checked"';
    echo '>'.mi18n("input slider description position top").'<br/>
  <input type="radio" name="CMS_VAR[400]" value="bottom"';
    if(CMS_VALUE[400]=="bottom") echo ' checked="checked"';
    echo '>'.mi18n("input slider description position bottom").'
</td></tr>';

echo '<tr><td>'.mi18n("input slider navi show arrows").'</td><td>
  <input type="radio" name="CMS_VAR[450]" value="yes"';
    if(CMS_VALUE[450]=="yes") echo ' checked="checked"';
    echo '>'.mi18n("input yes").'<br/>
  <input type="radio" name="CMS_VAR[450]" value="no"';
    if(CMS_VALUE[450]=="no") echo ' checked="checked"';
    echo '>'.mi18n("input no").'
</td></tr>';

echo '<tr><td>'.mi18n("input slider navi show bullets").'</td><td>
  <input type="radio" name="CMS_VAR[500]" value="yes"';
    if(CMS_VALUE[500]=="yes") echo ' checked="checked"';
    echo '>'.mi18n("input yes").'<br/>
  <input type="radio" name="CMS_VAR[500]" value="no"';
    if(CMS_VALUE[500]=="no") echo ' checked="checked"';
    echo '>'.mi18n("input no").'
</td></tr>';

/*
echo '<tr><td>'.mi18n("input slider height").'</td><td><input size="2" type="text" name="CMS_VAR[300]" value="CMS_VALUE[300]"> '.mi18n("input slider height unit").'</td></tr>';
*/

if(CMS_VALUE[50]=="fading")
	{
	echo '<tr><td>'.mi18n("input slider fading-time").'</td><td><input size="2" type="text" name="CMS_VAR[310]" value="CMS_VALUE[310]"> '.mi18n("input slider fading-time unit").'</td></tr>';
	}
echo '<tr><td>'.mi18n("input slider display-time").'</td><td><input size="2" type="text" name="CMS_VAR[320]" value="CMS_VALUE[320]"> '.mi18n("input slider display-time unit").'</td></tr>';

/*
echo '<tr><td>'.mi18n("input slider navi show play-pause").'</td><td>
  <input type="radio" name="CMS_VAR[600]" value="yes"';
    if(CMS_VALUE[600]== "yes") echo ' checked="checked"';
    echo '>'.mi18n("input yes").'<br/>
  <input type="radio" name="CMS_VAR[600]" value="no"';
    if(CMS_VALUE[600]== "no") echo ' checked="checked"';
    echo '>'.mi18n("input no").'
</td></tr>';
*/

echo '</table>';
Modul-Ausgabe

Code: Alles auswählen

<?php
/***********************************************
* CONTENIDO MODUL - OUTPUT
*
* Modulname   :     stage_sd
* Author(s)   :     Seamless-Design Markus Hübner
* Copyright   :     Markus Hübner
* Created     :     05/2019
* modified    :     02/2022 - added slider change via swipe gestures and minor fixes
************************************************/

$show_stage="CMS_VALUE[10]";
$animation_type="CMS_VALUE[50]";
$idcat_slider_articles="CMS_VALUE[100]";
$sort_by="CMS_VALUE[200]"; // title, created, published
$sort_direction="CMS_VALUE[210]"; // ASC or DESC
//$slider_height="CMS_VALUE[300]"; //em is used!
$slider_height="30"; //em is used! currently not via this variable but css to gain more flexibility for responsiveness
$slide_transition="CMS_VALUE[310]"; //seconds are used! 
if($slide_transition=="") $slide_transition="2"; //seconds are used! 
$slide_duration="CMS_VALUE[320]"; //milli-seconds are used!
if($slide_duration=="") $slide_duration="5000"; //milli-seconds are used!
$description_position="CMS_VALUE[400]";
if($description_position=="") $description_position="bottom";
$show_arrows="CMS_VALUE[450]";
if($show_arrows=="") $show_arrows="yes";
$show_slide_numbers="CMS_VALUE[500]";
if($show_slide_numbers=="") $show_slide_numbers="yes";
//$show_play_pause="CMS_VALUE[600]";
$show_play_pause="no";


if($show_stage=="true")
{
$array_articles_order=array();
$query="SELECT  T1.idart, T2.title, T2.published
FROM  con_cat_art T1, con_art_lang T2
WHERE  T1.idart = T2.idart 
AND T1.idcat='$idcat_slider_articles' 
AND T2.online='1' 
ORDER BY T2.$sort_by $sort_direction";
  $result = cRegistry::getDb();
  $result->query($query);
  while($result->nextRecord())
    {
	  $array_result=$result->toArray();
	  $array_articles_order[]=$array_result[idart];
    }

echo '<div id="slides" class="slider">';// style="height: '.$slider_height.'em;">';
$arr_slides_length=count($array_articles_order);
$slide_previous=$arr_slides_length-1; //initially the first element of array is shown and previous points to the last element of array
$slide_current=0; //initially the first element of the array is displayed (0)
$slide_next=1; //initially the first shown slide is the first element of array (0)
$a=0;
foreach($array_articles_order AS $idart_sliderarticle)
  {
  $article = new cApiArticleLanguage();
  $article->loadByArticleAndLanguageId($idart_sliderarticle, $lang);
  $slide_text=$article->getContent('CMS_HTML', 1);
  $upl_id=$article->getContent('CMS_IMGEDITOR', 1);
  $query="SELECT dirname,filename FROM con_upl WHERE idupl='$upl_id'";
  $result = cRegistry::getDb();
  $result->query($query);
  while($result->nextRecord()) $array_result=$result->toArray();
  $slide_image=$standard_upload_folder.$array_result[dirname].$array_result[filename];
  echo '<div ';
  
  if($animation_type=="fading")
	{
	if($arr_slides_length==1 OR $a==0) echo 'class="slide showing"';
		else echo 'class="slide"';
	}
  if($animation_type=="sliding")
	{
	if($arr_slides_length==1 OR $a==0) echo 'class="slide2 slide2_initial"';
		else echo 'class="slide2"';
	}
	
  echo ' style="background-image: url(\'upload/'.$slide_image.'\'); transition: opacity '.$slide_transition.'s;';// height: '.$slider_height.'em;';
  echo '"/>';
  if($arr_slides_length>1 AND $show_arrows=="yes")
    {
    echo '<div class="slider_nav_button_left" onclick="javascript: chooseSlide('.$slide_previous.','.$arr_slides_length.');"><div class="slider_nav_button_icon">&lsaquo;</div></div>';
    echo '<div class="slider_nav_button_right" onclick="javascript: chooseSlide('.$slide_next.','.$arr_slides_length.');"><div class="slider_nav_button_icon">&rsaquo;</div></div>';
    }
  $slide_previous++;
  if($slide_previous>=$arr_slides_length) $slide_previous=0;
  $slide_current++;
  $slide_next++;
  if($slide_next>=$arr_slides_length) $slide_next=0;
  if($slide_text!="")
    {
    echo '<div class="description" style="';
    if($description_position=="top") echo 'top: 0px;';
    else echo 'bottom: 0px;';
    echo '">'.$slide_text.'</div>';
    }
  echo '</div>';
  $a++;
  }
echo '</div>';

if($arr_slides_length>1)
  {
  echo '<div class="amount_of_slides">';
  if($show_slide_numbers=="no") echo '<ul id="slides_numbers" class="number_of_slide_no">';
    else echo '<ul id="slides_numbers" class="number_of_slide">'; // solution via css is needed to avoid crashing js, which does not find the bullets to change if markup is not rendered
  $i=0;
  while($i<$arr_slides_length)
    {
    echo '<li onclick="javascript: chooseSlide('.$i.','.$arr_slides_length.',\'bullets\');" ';
    if($i==0) echo 'class="slide_number number_active"';
      else echo 'class="slide_number number_passive"';
    echo '>';
    echo '&bull;';
    echo '</li>';
    $i++;
    }
  echo '</ul></div>';

  if($show_play_pause=="no") echo '<div class="control_no">';
    else echo '<div class="control">';
  echo '<button class="controls" id="pause">&#10073;&#10073;</button></control></div>';
?>
<script type="text/javascript">
var var_slide_duration=<?php echo $slide_duration; ?>*1;
var var_more_than_one_slide=true;
var var_animation_type='<?php echo $animation_type; ?>';
</script>
<?php
}
else
  {
  ?>
  <script type="text/javascript">
  var var_more_than_one_slide=false;
  var var_animation_type='<?php echo $animation_type; ?>';
  </script>
  <?php
  }
}
?>
CSS

Code: Alles auswählen

.controls {
margin-top: 0em;
}
#slides{
position: relative;
height: 30em;
overflow: hidden;
font-size: 1em;
}
.slider {
height: 30em;
}
.slide{
height: 30em;
position: absolute;
left: 0px;
top: 0px;
height: 30em;
width: 100%;
opacity: 0;
z-index: 1;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.showing{
opacity: 1;
z-index: 2;
}

.slide2{
height: 30em;
position: absolute;
left: 100%;
top: 0px;
height: 30em;
width: 100%;
/*z-index: 1;*/
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.slide2_initial {
left: 0%;
}
.showing2{
left: 0%;
/*z-index: 2;*/
animation: move_left 1s;/* infinite;*/
}
@keyframes move_left {
from {left: 100%;}
to {left: 0%;}
}
	.showing2backward{
	left: 0%;
	/*z-index: 2;*/
	animation: move_right 1s;/* infinite;*/
	}
	@keyframes move_right {
	from {left: -100%;}
	to {left: 0%;}
	}
.fading2 {
left: -100%;
animation: move_left_fading 1s;/* infinite;*/
}
@keyframes move_left_fading {
from {left: 0%;}
to {left: -100%;}
}
	.fading2backward {
	left: 100%;
	animation: move_right_fading 1s;/* infinite;*/
	}
	@keyframes move_right_fading {
	from {left: 0%;}
	to {left: 100%;}
	}

	.off_canvas_left {
	left: -100%;
	}
	.off_canvas_right {
	left: 100%;
	border: 5px solid red;
	}

div.description {
position: absolute;
width: 90%;
padding: 0.2em;
	padding-left: 5%;
	padding-right: 5%;
background-color: rgba(255,255,255,0.5);
color: var(--primary_03);
font-size: 1em;
}

div.amount_of_slides {
text-align: center;
}

ul.number_of_slide {
padding-left: 0;
margin-top: -0.5em;
margin-bottom: -0.5em;
}
ul.number_of_slide_no,
	.control_no {
display: none;
}
ul.number_of_slide li {
list-style-type: none;
display: inline;
font-size: 3em;
line-height: 1em;
	padding-left: 0.1em;
	padding-right: 0.1em;
cursor: pointer;
}
ul.number_of_slide li:hover {
color: var(--primary_01);
transition: 0.5s;
}
li.number_active {
color: var(--primary_01);
transition: 0.5s;
}
li.number_passive {
color:  var(--secondary_01);
transition: 0.5s;
}

div.control {
text-align: center;
margin-top: 1em;
}
div.control button  {
background-color: ffffff;
color: #444444;
border: 1px solid #444444;
border-radius: 0.3em;
padding: 0.5em;
transition: 0.5s;
width: 3em;
}
div.control button:hover  {
background-color: #444444;
color: #ffffff;
transition: 0.5s;
cursor: pointer;
}

div.slider_nav_button_left,
div.slider_nav_button_right {
position: relative;
z-index: 10000;
width: 5%;
height: 30em;
cursor: pointer;
display: table;
}
div.slider_nav_button_left {
float: left;
}
div.slider_nav_button_right {
float: right;
}
div.slider_nav_button_icon {
display: table-cell;
vertical-align: middle;
text-align: center;
text-shadow: 0px 0px 5px #000000;
color: #ffffff;
font-size: 5em;
opacity: 0.5;
transition: 0.5s;
}
div.slider_nav_button_icon:hover {
opacity: 1;
transition: 0.5s;
}
JavaScript

Code: Alles auswählen

if(var_more_than_one_slide==true)
{
if(var_animation_type=="fading") var slides = document.querySelectorAll('#slides .slide');
if(var_animation_type=="sliding") var slides = document.querySelectorAll('#slides .slide2');

var slides_numbers = document.querySelectorAll('#slides_numbers .slide_number');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,var_slide_duration);



function nextSlide(){
if(var_animation_type=="fading") slides[currentSlide].className = 'slide';
if(var_animation_type=="sliding") slides[currentSlide].className = 'slide2 fading2';

slides_numbers[currentSlide].className = 'slide_number number_passive';
currentSlide = (currentSlide+1)%slides.length;
if(var_animation_type=="fading") slides[currentSlide].className = 'slide showing';
if(var_animation_type=="sliding") slides[currentSlide].className = 'slide2 showing2';

slides_numbers[currentSlide].className = 'slide_number number_active';
}



var playing = true;
var pauseButton = document.getElementById('pause');



function pauseSlideshow(){
pauseButton.innerHTML = '&#10095;';
playing = false;
clearInterval(slideInterval);
}



function playSlideshow(){
pauseButton.innerHTML = '&#10073;&#10073;';
playing = true;
slideInterval = setInterval(nextSlide,var_slide_duration);
}



function chooseSlide(var_chosen_slide,var_amount_of_slides,var_initiated_by) {
pauseSlideshow();
var var_direction="forward";
if(currentSlide>var_chosen_slide) var_direction="backward";
if(currentSlide==var_amount_of_slides-1 && var_chosen_slide==0) var_direction="forward";
if(currentSlide==0 && var_chosen_slide==var_amount_of_slides-1) var_direction="backward";
if(var_animation_type=="fading") 
	{
	currentSlide=var_chosen_slide;
	var var_i=0;
	while(var_i<var_amount_of_slides)
		{
		if(var_i!=var_chosen_slide)
			{
			slides[var_i].className = 'slide';
			slides_numbers[var_i].className = 'slide_number number_passive';
			}
			else
				{
				slides[var_i].className = 'slide showing';
				slides_numbers[var_i].className = 'slide_number number_active';
				}
		var_i++;
		}
	}
	
	
	
	
if(var_animation_type=="sliding") 
	{
	if(var_direction=="forward")
		{
		var var_j=0;
		while(var_j<var_amount_of_slides)
			{
			if(var_j!=currentSlide)
				{
				slides[var_j].className = 'slide2';
				var_bullet=var_j;
				}
				else
					{
					var_bullet=var_j+1;
					if(var_bullet>var_amount_of_slides-1) var_bullet=0;
					}
			var_j++;
			}	
		if(var_initiated_by=="bullets") var var_slide_to_show=var_chosen_slide;
			else
				{
				var var_slide_to_show=currentSlide+1;
				if(var_slide_to_show>var_amount_of_slides-1) var_slide_to_show=0;
				}
		slides[currentSlide].className = 'slide2 fading2';
		slides[var_slide_to_show].className = 'slide2 showing2';
		slides_numbers[currentSlide].className = 'slide_number number_passive';
		slides_numbers[var_slide_to_show].className = 'slide_number number_active';
		currentSlide=var_slide_to_show;
		}
		
	if(var_direction=="backward")
		{
		var var_j=0;
		while(var_j<var_amount_of_slides)
			{
			if(var_j!=currentSlide)
				{
				slides[var_j].className = 'slide2 off_canvas_left';
				}
			var_j++;
			}
		if(var_initiated_by=="bullets") var var_slide_to_show=var_chosen_slide;
			else
				{
				var var_slide_to_show=currentSlide-1;
				if(var_slide_to_show<0) var_slide_to_show=var_amount_of_slides-1;
				}
		slides[currentSlide].className = 'slide2 fading2backward';
		slides[var_slide_to_show].className = 'slide2 showing2backward';
		slides_numbers[currentSlide].className = 'slide_number number_passive';
		slides_numbers[var_slide_to_show].className = 'slide_number number_active';
		currentSlide=var_slide_to_show;
		}
	}
}



pauseButton.onclick = function(){
if(playing){ pauseSlideshow(); }
else{ playSlideshow(); }
};




//https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
let touchstartX = 0
let touchendX = 0

const slider = document.getElementById('slides');

function handleGesture() {
if(var_animation_type=="fading") var arr_slides_by_classname=document.getElementsByClassName("slide");
if(var_animation_type=="sliding") var arr_slides_by_classname=document.getElementsByClassName("slide2");

if(var_animation_type=="fading")
	{
	for (var i = 0; i < arr_slides_by_classname.length; i++)
		{
		if(arr_slides_by_classname[i]['className']=="slide showing")
			{
			var var_current_slide_number=i;
			var var_previous_slide_number=i-1;
			if(var_previous_slide_number<0) var_previous_slide_number=arr_slides_by_classname.length-1;
			var var_next_slide_number=i+1;
			if(var_next_slide_number>=arr_slides_by_classname.length) var_next_slide_number=0;
			}
		}
	if (touchendX < touchstartX)
		{
		chooseSlide(var_next_slide_number,arr_slides_by_classname.length)
		}
	if (touchendX > touchstartX)
		{
		chooseSlide(var_previous_slide_number,arr_slides_by_classname.length)
		}
	}
if(var_animation_type=="sliding")
	{
	if (touchendX < touchstartX)
		{
		var var_slide_to_show=currentSlide+1;
		if(var_slide_to_show>arr_slides_by_classname.length-1) var_slide_to_show=0;
		chooseSlide(var_slide_to_show,arr_slides_by_classname.length)
		}
	if (touchendX > touchstartX)
		{
		var var_slide_to_show=currentSlide-1;
		if(var_slide_to_show<0) var_slide_to_show=arr_slides_by_classname.length-1;
		chooseSlide(var_slide_to_show,arr_slides_by_classname.length)
		}
	}
}

slider.addEventListener('touchstart', e => {
touchstartX = e.changedTouches[0].screenX
})

slider.addEventListener('touchend', e => {
touchendX = e.changedTouches[0].screenX
handleGesture()
})

}
Übersetzung

Code: Alles auswählen

input animation type=Animationsvariante
input fading=Fading
input idcat slider articles=idcat der Slider Artikel
input no=nein
input show stage=Stage anzeigen
input slider description position=Position der Beschreibung
input slider description position bottom=unten
input slider description position top=oben
input slider display-time=Anzeigedauer pro Teaser
input slider display-time unit=Millisekunden (leer lassen für Standardwert)
input slider fading-time=Dauer Fading-Animation
input slider fading-time unit=Sekunden (Teilsekunden bitte mit Punkt angeben: 3.5; leer lassen für Standardwert)
input slider height=Höhe
input slider height unit=em
input slider navi show arrows=zeige Navigationsicons auf Slides
input slider navi show bullets=zeige Teaser-Bullets
input slider navi show play-pause=zeige play/pause
input sliding=Sliding
input sort articles ascending=aufsteigend
input sort articles by=Sortierung nach
input sort articles by created=erstellt
input sort articles by published=veröffentlicht
input sort articles by title=Titel
input sort articles descending=absteigend
input yes=ja
Changelog:
16.02.2022: Komplette Überarbeitung und Erweiterung, alle Snippets entsprechend angepasst.
stage_sd-frontend-001-klein.JPG
(95.73 KiB) Noch nie heruntergeladen
Zuletzt geändert von McHubi am Mi 16. Feb 2022, 20:54, insgesamt 2-mal geändert.
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

McHubi
Beiträge: 1196
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: Modul stage_sd - Bühne für den Seitenkopf

Beitrag von McHubi » Mi 16. Feb 2022, 20:31

Habe das Modul komplett überarbeitet und erweitert. Hinzu gekommen ist:
* zweite Animationsvariante Sliding
* Reaktion auf Swipen bei Nutzung von Touch-Devices
* ergänzte und angepasste Konfigurationsmöglichkeiten

Wie immer: Alle Anpassungen sind im Eröffnungspost enthalten.
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Faar
Beiträge: 1817
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Modul stage_sd - Bühne für den Seitenkopf

Beitrag von Faar » Do 17. Feb 2022, 13:35

McHubi hat geschrieben:
Mi 16. Feb 2022, 20:31
Habe das Modul komplett überarbeitet und erweitert.
Danke :)
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

Antworten