CoverFlow Style dont Work

Help / Discuss
#1

Hello the team I hope you are doing well.

I have the following problem:

I set up an html page with css embedded in the code so that the final rendering is in “coverflow” mode.

When I test my page locally or on online interpreters it works perfectly.

Except that in xwiki, nothing happens.

Here is the result :

image

I use xWiki 2.1 for the syntaxe of the documents.

I am sending you the index.txt file because I am a new user and I am not allowed to send more than 5 links …

You just need to change index.txt to index.html
index.txt (18.8 KB)

Thank you in advance for your help

#2

Hi Marco,

I’m just new on xwiki an have also lot’s of problem but myby that one here helps you:
Playground CoverFlow

You need to things:
The main page with that code snippet in there:

{{velocity}}
#set ($discard = $xwiki.ssx.use(’…PageLocaction…’))
{{html}}
html code you need:
{{/html}}
{{/velocity}}

Second the css Code:
open the object of the page and add “XWiki.StyleSheetExtentions”

Give a Name:
Add the Code
Use this extention = On this page…
Parse = No
Caching = default.

I hove that one helps a littel bit.

Btw. you code CoverFlow looks nice!

#3

Hi @TheBob thank you very much for your help.

I will try this and I will keep you posted :crossed_fingers:

#4

Hi,

The result is not as expected like below :

image

#5

Hello Marco,
did you set the correct PageLocation of you page?

#6

Hi Bob,

I have correctly informed the url which is in the browser when I am on my page and it unfortunately does not work.

#7

Hi,

I tried with iframe but it dosent work and when i display the page, its begin downloading automaticly my html file.

#8

Here are my steps:

  1. Create a site called CoverFlow under Folder XWiki (all other folder or sidename are alos pos.)
  2. Hit source (Quellcode) Button
  3. Add this line

{{velocity}}
#set ($discard = $xwiki.ssx.use(‘XWiki.CoverFlow’))
{{html}}
<body>
<header class=“ScriptHeader”>
<div class=“rt-container”>
<div class=“col-rt-12”>
<div class=“rt-heading”>
<h1 style=“text-align: center;”>Espace Produit</h1>
</div>
</div>
</div>
</header>
<section>
<div class=“rt-container”>
<div class=“col-rt-12”>
<div class=“Scriptcontent”>
<div class=“container”>
<div class=“wgh-slider”>
<input class=“wgh-slider-target” type=“radio” id=“slide-1” name=“slider”/>
<input class=“wgh-slider-target” type=“radio” id=“slide-2” name=“slider”/>
<input class=“wgh-slider-target” type=“radio” id=“slide-3” name=“slider”/>
<input class=“wgh-slider-target” type=“radio” id=“slide-4” name="slider"checked=“checked”/>
<input class=“wgh-slider-target” type=“radio” id=“slide-5” name=“slider”/>
<input class=“wgh-slider-target” type=“radio” id=“slide-6” name=“slider”/>
<input class=“wgh-slider-target” type=“radio” id=“slide-7” name=“slider”/>
<div class=“wgh-slider__viewport”>
<div class=“wgh-slider__viewbox”>
<div class=“wgh-slider__container”>
<div class=“wgh-slider-item”>
<div class=“wgh-slider-item__inner”>
<figure class=“wgh-slider-item-figure”><img class=“wgh-slider-item-figure__image” src=“img/image-1.jpg” alt=“The 5th Exotic”/>
<figcaption class=“wgh-slider-item-figure__caption”><a href=“https://f4.bcbits.com/img/a3905613628_16.jpg”>The 5th Exotic</a><span>Quantic</span></figcaption>
</figure>
<label class=“wgh-slider-item__trigger” for=“slide-1” title=“Show product 1”></label>
</div>
</div>
<div class=“wgh-slider-item”>
<div class=“wgh-slider-item__inner”>
<figure class=“wgh-slider-item-figure”><img class=“wgh-slider-item-figure__image” src=“img/image-2.jpg” alt=“The 5th Exotic”/>
<figcaption class=“wgh-slider-item-figure__caption”><a href=“https://f4.bcbits.com/img/a3905613628_16.jpg”>The 5th Exotic</a><span>Quantic</span></figcaption>
</figure>
<label class=“wgh-slider-item__trigger” for=“slide-2” title=“Show product 2”></label>
</div>
</div>
<div class=“wgh-slider-item”>
<div class=“wgh-slider-item__inner”>
<figure class=“wgh-slider-item-figure”><img class=“wgh-slider-item-figure__image” src=“img/image-3.png” alt=“The 5th Exotic”/>
<figcaption class=“wgh-slider-item-figure__caption”><a href=“https://f4.bcbits.com/img/a3905613628_16.jpg”>The 5th Exotic</a><span>Quantic</span></figcaption>
</figure>
<label class=“wgh-slider-item__trigger” for=“slide-3” title=“Show product 3”></label>
</div>
</div>
<div class=“wgh-slider-item”>
<div class=“wgh-slider-item__inner”>
<figure class=“wgh-slider-item-figure”><img class=“wgh-slider-item-figure__image” src=“img/image-4.jpg” alt=“The 5th Exotic”/>
<figcaption class=“wgh-slider-item-figure__caption”><a href=“https://f4.bcbits.com/img/a3905613628_16.jpg”>REX</a><span>Retour d’expérience</span></figcaption>
</figure>
<label class=“wgh-slider-item__trigger” for=“slide-4” title=“Show product 4”></label>
</div>
</div>
<div class=“wgh-slider-item”>
<div class=“wgh-slider-item__inner”>
<figure class=“wgh-slider-item-figure”><img class=“wgh-slider-item-figure__image” src=“img/image-5.jpg” alt=“RYSY - Traveler LP”/>
<figcaption class=“wgh-slider-item-figure__caption”><a href=“https://picsum.photos/id/237/480/480”>RYSY - Traveler LP</a><span>RYSY</span></figcaption>
</figure>
<label class=“wgh-slider-item__trigger” for=“slide-5” title=“Show product 5”></label>
</div>
</div>
<div class=“wgh-slider-item”>
<div class=“wgh-slider-item__inner”>
<figure class=“wgh-slider-item-figure”><img class=“wgh-slider-item-figure__image” src=“img/image-1.jpg” alt=“The 5th Exotic”/>
<figcaption class=“wgh-slider-item-figure__caption”><a href=“https://f4.bcbits.com/img/a3905613628_16.jpg”>The 5th Exotic</a><span>Quantic</span></figcaption>
</figure>
<label class=“wgh-slider-item__trigger” for=“slide-6” title=“Show product 6”></label>
</div>
</div>
<div class=“wgh-slider-item”>
<div class=“wgh-slider-item__inner”>
<figure class=“wgh-slider-item-figure”><img class=“wgh-slider-item-figure__image” src=“img/image-1.jpg” alt=“The 5th Exotic”/>
<figcaption class=“wgh-slider-item-figure__caption”><a href=“https://f4.bcbits.com/img/a3905613628_16.jpg”>The 5th Exotic</a><span>Quantic</span></figcaption>
</figure>
<label class=“wgh-slider-item__trigger” for=“slide-7” title=“Show product 7”></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
{{/html}}
{{/velocity}}

Safe that

  1. use Edit / Object Button
  2. Add new Object called StyleSheetExtension
  3. Name = CoverFlow_Class
  4. Add CSS Code

body {
font-family: Arial, sans-serif;
background-color: #2d2d2d;
}
.container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.wgh-slider {
position: relative;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
.wgh-slider__viewport {
position: relative;
height: 100%;
width: 100%;
}
.wgh-slider__viewbox {
display: block;
position: relative;
perspective: 100vw;
margin: 0 auto;
width: 33.3333333333%;
max-width: 280px;
transform-style: preserve-3d;
z-index: 0;
}
.wgh-slider__viewbox::before {
position: relative;
top: 0;
left: 0;
display: block;
content: “”;
height: 0;
padding-bottom: 100%;
width: 100%;
}
.wgh-slider__container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: transform 0.3s cubic-bezier(0.62, 0.28, 0.23, 0.99) 0.3s;
transform-style: preserve-3d;
}
.wgh-slider-target {
position: absolute;
width: 0;
height: 0;
opacity: 0;
visibility: hidden;
}
input.wgh-slider-target {
display: none;
}
.wgh-slider-target:first-of-type:last-of-type ~ .wgh-slider__viewport .wgh-slider-item:nth-child(1) .wgh-slider-item__trigger {
display: none;
}
.wgh-slider-target:nth-of-type(1):checked ~ .wgh-slider__viewport .wgh-slider__container {
transform: translateX(0%);
}
.wgh-slider-target:nth-of-type(2):checked ~ .wgh-slider__viewport .wgh-slider__container {
transform: translateX(-50%);
}
.wgh-slider-target:nth-of-type(3):checked ~ .wgh-slider__viewport .wgh-slider__container {
transform: translateX(-100%);
}
.wgh-slider-target:nth-of-type(4):checked ~ .wgh-slider__viewport .wgh-slider__container {
transform: translateX(-150%);
}
.wgh-slider-target:nth-of-type(5):checked ~ .wgh-slider__viewport .wgh-slider__container {
transform: translateX(-200%);
}
.wgh-slider-target:nth-of-type(6):checked ~ .wgh-slider__viewport .wgh-slider__container {
transform: translateX(-250%);
}
.wgh-slider-target:nth-of-type(7):checked ~ .wgh-slider__viewport .wgh-slider__container {
transform: translateX(-300%);
}
.wgh-slider-target:nth-of-type(8):checked ~ .wgh-slider__viewport .wgh-slider__container {
transform: translateX(-350%);
}
.wgh-slider-item {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
transform: translate3d(0, 0, 0) rotateY(45deg);
transition: transform 0.6s cubic-bezier(0.62, 0.28, 0.23, 0.99) 0.15s;
}
.wgh-slider-item:nth-child(1) {
left: 0%;
}
.wgh-slider-item:nth-child(2) {
left: 50%;
}
.wgh-slider-item:nth-child(3) {
left: 100%;
}
.wgh-slider-item:nth-child(4) {
left: 150%;
}
.wgh-slider-item:nth-child(5) {
left: 200%;
}
.wgh-slider-item:nth-child(6) {
left: 250%;
}
.wgh-slider-item:nth-child(7) {
left: 300%;
}
.wgh-slider-item:nth-child(8) {
left: 350%;
}
.wgh-slider-item__trigger {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
cursor: pointer;
}
.wgh-slider-target:nth-of-type(8):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(8) .wgh-slider-item__trigger, .wgh-slider-target:nth-of-type(7):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(7) .wgh-slider-item__trigger, .wgh-slider-target:nth-of-type(6):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(6) .wgh-slider-item__trigger, .wgh-slider-target:nth-of-type(5):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(5) .wgh-slider-item__trigger, .wgh-slider-target:nth-of-type(4):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(4) .wgh-slider-item__trigger, .wgh-slider-target:nth-of-type(3):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(3) .wgh-slider-item__trigger, .wgh-slider-target:nth-of-type(2):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(2) .wgh-slider-item__trigger, .wgh-slider-target:nth-of-type(1):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(1) .wgh-slider-item__trigger {
display: none;
}
.wgh-slider-item__inner {
position: relative;
width: 100%;
height: 100%;
transform-origin: center center;
transform: scale(0.75);
transition: transform 0.3s cubic-bezier(0.62, 0.28, 0.23, 0.99) 0s;
z-index: 10;
}
.wgh-slider-item__inner::before, .wgh-slider-item__inner::after {
display: block;
position: absolute;
content: “”;
}
.wgh-slider-item__inner::before {
top: 24px;
left: 24px;
bottom: 24px;
right: 24px;
z-index: 0;
transition: transform 0.3s cubic-bezier(0.62, 0.28, 0.23, 0.99) 0.15s;
transform: translate(-24px, 12px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.wgh-slider-item__inner::after {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
background-repeat: repeat-x;
background-size: 200% 100%;
background-position: 0% 0%;
transition: background-position 0.3s linear;
}
.wgh-slider-target:nth-of-type(8):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(8) .wgh-slider-item__inner, .wgh-slider-target:nth-of-type(7):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(7) .wgh-slider-item__inner, .wgh-slider-target:nth-of-type(6):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(6) .wgh-slider-item__inner, .wgh-slider-target:nth-of-type(5):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(5) .wgh-slider-item__inner, .wgh-slider-target:nth-of-type(4):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(4) .wgh-slider-item__inner, .wgh-slider-target:nth-of-type(3):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(3) .wgh-slider-item__inner, .wgh-slider-target:nth-of-type(2):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(2) .wgh-slider-item__inner, .wgh-slider-target:nth-of-type(1):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(1) .wgh-slider-item__inner {
transform: scale(1);
transition-delay: 0.6s;
}
.wgh-slider-target:nth-of-type(8):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(8) .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(7):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(7) .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(6):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(6) .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(5):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(5) .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(4):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(4) .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(3):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(3) .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(2):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(2) .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(1):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(1) .wgh-slider-item__inner::before {
transform: translate(0, 24px);
}
.wgh-slider-target:nth-of-type(8):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(8) .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(7):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(7) .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(6):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(6) .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(5):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(5) .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(4):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(4) .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(3):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(3) .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(2):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(2) .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(1):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(1) .wgh-slider-item__inner::after {
background-position: -50% 0%;
}
.wgh-slider-target:nth-of-type(8):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(8) ~ .wgh-slider-item .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(7):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(7) ~ .wgh-slider-item .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(6):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(6) ~ .wgh-slider-item .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(5):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(5) ~ .wgh-slider-item .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(4):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(4) ~ .wgh-slider-item .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(3):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(3) ~ .wgh-slider-item .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(2):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(2) ~ .wgh-slider-item .wgh-slider-item__inner::before, .wgh-slider-target:nth-of-type(1):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(1) ~ .wgh-slider-item .wgh-slider-item__inner::before {
transform: translate(24px, 12px);
}
.wgh-slider-target:nth-of-type(8):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(8) ~ .wgh-slider-item .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(7):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(7) ~ .wgh-slider-item .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(6):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(6) ~ .wgh-slider-item .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(5):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(5) ~ .wgh-slider-item .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(4):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(4) ~ .wgh-slider-item .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(3):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(3) ~ .wgh-slider-item .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(2):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(2) ~ .wgh-slider-item .wgh-slider-item__inner::after, .wgh-slider-target:nth-of-type(1):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(1) ~ .wgh-slider-item .wgh-slider-item__inner::after {
background-position: -100% 0%;
}
.wgh-slider-item-figure {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.wgh-slider-item-figure__image {
position: absolute;
display: block;
max-width: 100%;
max-height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
opacity: 1;
}
.wgh-slider-item-figure__caption {
position: absolute;
display: block;
overflow: hidden;
left: 0;
right: 0;
bottom: 0;
color: #fff;
padding: 24px;
background-image: linear-gradient(0deg, #000 0%, transparent 100%);
z-index: 2;
}
.wgh-slider-item-figure__caption a {
display: inline-block;
text-decoration: none;
font-size: 18px;
line-height: 20px;
font-weight: bold;
color: #fff;
}
.wgh-slider-item-figure__caption span {
display: block;
font-size: 14px;
line-height: 16px;
}
.wgh-slider-target:nth-of-type(8):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(8), .wgh-slider-target:nth-of-type(7):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(7), .wgh-slider-target:nth-of-type(6):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(6), .wgh-slider-target:nth-of-type(5):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(5), .wgh-slider-target:nth-of-type(4):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(4), .wgh-slider-target:nth-of-type(3):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(3), .wgh-slider-target:nth-of-type(2):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(2), .wgh-slider-target:nth-of-type(1):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(1) {
transform: translate3d(0, 0, 0) rotateY(0deg);
z-index: 9999;
}
.wgh-slider-target:nth-of-type(8):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(8) ~ .wgh-slider-item, .wgh-slider-target:nth-of-type(7):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(7) ~ .wgh-slider-item, .wgh-slider-target:nth-of-type(6):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(6) ~ .wgh-slider-item, .wgh-slider-target:nth-of-type(5):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(5) ~ .wgh-slider-item, .wgh-slider-target:nth-of-type(4):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(4) ~ .wgh-slider-item, .wgh-slider-target:nth-of-type(3):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(3) ~ .wgh-slider-item, .wgh-slider-target:nth-of-type(2):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(2) ~ .wgh-slider-item, .wgh-slider-target:nth-of-type(1):checked ~ .wgh-slider__viewport .wgh-slider-item:nth-child(1) ~ .wgh-slider-item {
transform: translate3d(0, 0, 0) rotateY(-45deg) !important;
}

  1. Use this extention = On this page…

  2. Parse = No

  3. Caching = default

  4. Safe and View!

Result ist that one:
CoverFlow

For shure it’s not 100% what you want but with some code change it look like that waht you whant or not?

#9

Btw. to display that you client needs to be have a access to Internet because you are using href:…
But I think you now that :slight_smile:

#10

I have nothing more to say to you Bob apart Thank you, thank you very much for your patience and the time you devoted to helping me resolve my concern.

Now it works fine.

Well done ! :slight_smile: