Template by lck

[ustalo]

WE modify cool template by lck

add slideshow to background // done
change menu button style // done
We need to add support some bootstrap components as tabs and accordion

[ustalo]

Ludwig Zweck help us a lot


make 2 slideshow

Search
КОД: ВЫДЕЛИТЬ ВСЁ
<?php if (($s === 0) && (XH_ADM && !$edit || !XH_ADM)):?>
<div class="lck_slideshow"><?=slideshow('slideshow');?></div>
<?php endif;?>
Underneath extend with:
КОД: ВЫДЕЛИТЬ ВСЁ
<!-- All other Pages - Slideshow-2 -->
<?php if (($s > 0) && (XH_ADM && !$edit || !XH_ADM)):?>
<div class="lck_slideshow"><?=slideshow('slideshow-2');?></div>
<?php endif;?>
In userfiles/imgaes create a folder slideshow-2 and save your pictures in it.

[ustalo]

Slideshow per Plugin Slideshow_XH
1. Plugin installieren und konfigurieren
2. Template
a) Pluginaufruf einfügen unter Zeile 95
b) Zeile 245 bis 253 löschen
3. startpage.css, folgendes ändern: a) Zeile 98
b) Zeile 121
4.) stylesheet.css
a) am Ende der Seite einfügen:
}
b) Zeile 254
c) ab Zeile 1052
Gelöscht werden können dann auch im Template-Ordner images/ bg_startpage.jpg
bg.jpg
bg_mobil.jpg
EDIT:
unter userfiles/images einen neuen Ordner anlegen "slideshow", also wie im Pluginaufruf angegeben (siehe Punkt 2) und in diesen Ordner deine Bilder einfügen.

 
КОД: ВЫДЕЛИТЬ ВСЁ
<header id="lck_head">
<div class="lck_head"> /* unter dieser Zeile folgendes einfügen */
<!-- Slideshow mit Slideshow_XH -->
<?php if (XH_ADM && !$edit || !XH_ADM):?>
<div class="lck_slideshow"><?=slideshow('slideshow');?></div> <?php endif;?>
КОД: ВЫДЕЛИТЬ ВСЁ
// Simple Parallax-Effect for background-image + fadeout/fadein effect $(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop(); $('#lck_head').css('background-position-y',(scrolled*0.5)+'px');
$('.lck_logo, #searchbox, .lck_langmenu, .lck_subnav').css('opacity',1-(scrolled*.00250));
}
КОД: ВЫДЕЛИТЬ ВСЁ
#lck_head {
/* background-color: #2a2a2a;
}
background: url(images/bg_startpage.jpg) 50% 0 no-repeat; -webkit-background-size: cover;
background-size: cover; */
КОД: ВЫДЕЛИТЬ ВСЁ
#lck_head {
/* background-image: url(images/bg_mobil.jpg); */
}
height: initial;
КОД: ВЫДЕЛИТЬ ВСЁ

/* Slideshow mit Plugin Slideshow_XH */ .lck_slideshow {
position: fixed; top: 0;
left: 0;
width: 100%; height: inherit; margin: 0; padding: 0; z-index: -10;
}
.lck_slideshow img {
height: 100%;
КОД: ВЫДЕЛИТЬ ВСЁ

#lck_head {
/* background-color: #2a2a2a; */
}
/* background: url(images/bg.jpg) 50% 0 no-repeat; */ -webkit-background-size: cover;
background-size: cover;
display: table;
height: 33%; height: 33vh; margin: 0; min-height: 230px; padding: 0; width: 100%;
КОД: ВЫДЕЛИТЬ ВСЁ
#lck_head {
/* background: url(images/bg_mobil.jpg) 50% no-repeat; -webkit-background-size: cover;
background-size: cover; */
}
#lck_head {
}
/* background-color: rgba(0, 0, 0, 0); */ height: 200px;
min-height: 200px;

[lck]

Zur Info:
Es ging konkret um den Einbau von Slideshow_XH in das Template JekyllAndHyde wie hier beschrieben.

ustalo wollte eine zweite Slideshow für alle anderen Seiten (mit anderen Bildern).
Gelöst habe ich das momentan so, template.htm
Slideshow 1, nur aktiv auf der Startseite.

Code: Select all

<?php if (($s === 0) && (XH_ADM && !$edit || !XH_ADM)):?>
<div class="lck_slideshow"><?=slideshow('slideshow');?></div>
<?php endif;?>

Slideshow 2, aktiv auf allen anderen Seiten, auch Unterseiten.

Code: Select all

<?php if (($s > 0) && (XH_ADM && !$edit || !XH_ADM)):?>
<div class="lck_slideshow"><?=slideshow('slideshow-2');?></div>
<?php endif;?>

 

We need to add support some bootstrap components as tabs and accordion

Dazu bräuchte er noch Hilfe, bin aber kein Bootstrap-Fachmann.

@ustalo: Please describe your problem in detail here and a link to the website would also be very helpful.

[ustalo]

Mater LCK
come question. Could be you manage it easy.
Slideshow on page if we change standard size of browser window pictures is not proportional
http://cms.sima.spb.ru
haw to manage it?

[ustalo]

about problem with admin menu (does not switch edit-normal)
cms setting
Editmenu
scroll MUST BE OFF (uncheck)

[frase]

Slideshow on page if we change standard size of browser window pictures is not proportional

For me everything looks good - in all browsers and in different sizes.
The pictures have the right proportions (see picture below).

ustalo-screenshots.png

[frase]

about problem with admin menu (does not switch edit-normal)
cms setting
Editmenu
scroll MUST BE OFF (uncheck)

You mean the fhs-adminmenu?
Then yes! It must be switched off in the CMS configuration
=> Editmenu => Scroll = OFF.
But this is also described in the help file under "Activation".

[cmss]

You use
<script type="text/javascript" src="./plugins/jquery/lib/jquery/1.12.4/jquery.min.js"></script> and
<script type="text/javascript" src="./plugins/jquery/lib/migrate/jquery-migrate-1.4.1.min.js"></script>
With jquery 1.12.4 , jquery-migrate-1.4.1.min.js is superfluous - so better use jquery 2 instead of 1.12.4 which is also faster.

Support for bootstrap 3 is at https://www.w3schools.com/bootstrap/boo ... _pills.asp
and a carousel at https://www.w3schools.com/bootstrap/boo ... rousel.asp
A bootstrap slideshow is at https://www.script-tutorials.com/creati ... otstrap-3/
and at https://bootsnipp.com/snippets/nNB2a (bootstrap 4)

But there is more to do like addding of mod_deflate to htaccess. At the moment You have a google-pagespeed of 37 .
<IfModule mod_deflate.c>
<filesMatch "\.(js|css|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>

[ustalo]

Slideshow on page if we change standard size of browser window pictures is not proportional

For me everything looks good - in all browsers and in different sizes.
The pictures have the right proportions (see picture below).


ustalo-screenshots.png

it is slideshow in content
we works with slideshow in template background
it is distort
http://aporthodox.ru/