WebSite X5Help Center

 
James A F.
James A F.
User

Before/after image object  en

Autor: James A F.
Visitado 211, Seguidores 1, Compartilhado 0  

A before/after image object will not update. I see no indication that it has been predicated.

I've previously purchased and used it, as evidenced by this page:

https://makemediamry.net/comparison.html

I have recently had to update 2 or 3 other objects with no problem.

Your help will be appreciated.

Publicado em
9 RESPOSTAS
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês EN

The site is still using the old version 15. Have you purchased the new version?

General information on the use of the additional objects can be found here, see

-----

Optional Objects: what they are and how to use them

>> https://guide.websitex5.com/en/support/solutions/articles/44000822229

-----

Is there an error message?

If the new object has an arrow, it hasn't been downloaded yet. Simply drag the object into the grid to download it.

If the new version has been purchased, then the old object must be replaced with the new object in the grid.

----- Used version -----

----- New Version -----

----- Old version -----

Ler mais
Publicado em de Daniel W.
James A F.
James A F.
User
Autor

I do get an error message:

If a new version must be purchased this is the first time I have encountered that situation. Previous updates that I have done have automatically updated when I dragged them into the grid, as you mentioned, without additional expense.
I will have to re-evaluate how usefull that object is to me at this time before re-purchseing.

Thanks for your lightening fast reply.

Ler mais
Publicado em de James A F.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês EN

Is it possible that the program and the previous items were purchased using a different email address?

If they are different email addresses, Incomedia staff would have to merge the two email addresses. However, Incomedia staff will not be online again until Monday during office hours in Italy.

Ler mais
Publicado em de Daniel W.
Daniel W.
Daniel W.
User
Usuário do mês DEUsuário do mês EN

The objects in the Marketplace are updated from time to time, but if there are major changes, Incomedia will create a new object with a slightly different name, which must then be purchased.

Ler mais
Publicado em de Daniel W.
John S.
John S.
User

Here is a link to a quick-and-dirty test: https://bramminginfo.dk/js/foerefter.html

It is not functioning 100% - but close. What you see in the source-code should be copied to a HTML-object.

Ler mais
Publicado em de John S.
Incomedia
Eric C.
Incomedia

Hello James,
looking at the list of purchased objects for this account, I do not see Before/After Image
Do you perhaps have another e-mail address with which you may have created an account with us other than this one?
Thank you.

Ler mais
Publicado em de Eric C.
James A F.
James A F.
User
Autor

Eric, I believe I've had the same e-mail address the entire time I've used X5, several years.

Daniel & John & Eric, thanks much for your responses.

I used to tinker with HTML/CSS code with little expertise, starting in 1997 when things were much simpler. But when HTML5/CSS3 came along they greatly increased complexity, which came along with increased capabilities. That's why I started using X5. So I'll have to study how to employ John's intriguing suggestions.

JAF

Ler mais
Publicado em de James A F.
John S.
John S.
User

@James

Try to put the following codi into a HTML-object. It should function. To shift between images use the left/right arrows on the keyboard. You can of course change the image-source to your own image(s)


<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
}
.slider-wrapper {
width: 100%;
padding: 0;
margin: 0;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
background-color: #000;
}
.wrapper,
.gallery,
.img {
max-width: 600px;
height: auto;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
border: 2px solid #000;
margin: 0px auto 90px auto !important;
}
.gallery {
position: relative;
display: flex;
z-index: 1;
flex-direction: column;
}
.img {
min-width: 100%;
display: block;
cursor: pointer;
}
.gallery__resize,
.gallery__resize:after {
position: absolute;
top: 0;
cursor: pointer;
height: 100%;
}
.gallery__resize {
left: 0;
width: 50%;
overflow: hidden;
}
.tr {
transition: 0.6s;
}
.gallery__resize:after {
content: '';
width: 4px;
background-color: #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
box-sizing: border-box;
position: absolute;
right: 0;
z-index: 20;
}
#before,
#after {
position: absolute;
z-index: 100;
font-size: 16px;
padding: 10px 20px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #555;
background-color: rgba(255, 255, 255, 0.6);
font-family: 'Open Sans', sans-serif;
border-radius: 2px;
}
#before {
left: 0;
}
#after {
right: 0;
}
#left,
#right,
#photo-count {
position: absolute;
font-size: 18px;
color: #fff;
}
#left {
bottom: -40px;
left: 540px;
}
#right {
right: 15px;
bottom: -40px;
}
#photo-count {
font-size: 18px;
bottom: -40px;
font-weight: 500;
font-family: 'Open Sans', sans-serif;
}
#photo-name {
position: absolute;
font-size: 20px;
color: #fff;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
font-family: 'Open Sans', sans-serif;
}

@media (max-width: 768px) {
#before,
#after {
font-size: 1rem;
padding: 8px 16px;
}
#left,
#right,
#photo-count,
#photo-name {
font-size: 1rem;
bottom: -30px;
}
#left {
left: 350px;
}

.gallery {
width: 400px;
}
.gallery__resize {
width: 50%;
}
img {
width: 400px;
}
}

@media (max-width: 480px) {
#before,
#after {
font-size: 1rem;
padding: 6px 12px;
}
#left,
#right,
#photo-count,
#photo-name {
font-size: 1rem;
bottom: -25px;
}
#left {
left: 300px;
}

.gallery {
width: 350px;
}
.gallery__resize {
width: 50%;
}
img {
width: 350px;
}
}

</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const gallery = document.querySelector('.gallery');
const galleryResize = document.querySelector('.gallery__resize');
const before = document.querySelector('#before');
const after = document.querySelector('#after');

gallery.addEventListener('mousemove', (event) => {
let x = event.offsetX;
galleryResize.style.width = x + 'px';
galleryResize.classList.remove('tr');
});

before.onclick = () => {
galleryResize.style.width = '100%';
galleryResize.classList.add('tr');
};

after.onclick = () => {
galleryResize.style.width = '0%';
galleryResize.classList.add('tr');
};

const wrapper = document.querySelector('.wrapper');
const photoBefore = document.querySelector('.img-before');
const photoAfter = document.querySelector('.img-after');
const photoBeforeArray = [
'https://cdn.fs.teachablecdn.com/v7UiewjzS3Kprfpob2hB'
'https://cdn.fs.teachablecdn.com/v7UiewjzS3Kprfpob2hB'
'https://cdn.fs.teachablecdn.com/vc1bqcmPScTG7Civt1Oc'
'https://cdn.fs.teachablecdn.com/ArPvY4UBQ9WBS9krDneF'
'https://cdn.fs.teachablecdn.com/uwxpa9TeGAqjZxluyngO'
'https://cdn.fs.teachablecdn.com/gnWdMEjjS7vZXoNrHang'
];
const photoAfterArray = [
'https://cdn.fs.teachablecdn.com/uSqKRhLtQmgMyDvdby9Q'
'https://cdn.fs.teachablecdn.com/MtTtxZHnTnKXm1gG1ydR'
'https://cdn.fs.teachablecdn.com/CevzlmddSPOY4Oze7MDD'
'https://cdn.fs.teachablecdn.com/YLGWnq88Q4uzegpshmWC'
'https://cdn.fs.teachablecdn.com/MtTtxZHnTnKXm1gG1ydR'
'https://cdn.fs.teachablecdn.com/MWvnf3LmRU2fvnoC7rbD'
];
const photoNames = ['Image 1', 'Ekstra', 'Billede 2' ,'Image 3', 'Image 4', 'Image 5'];

const left = document.querySelector('#left');
const right = document.querySelector('#right');
const photoName = document.querySelector('#photo-name');
let count = 0;
let countPhoto = 1;

right.addEventListener('click', nextPhoto);
left.addEventListener('click', prevPhoto);

window.addEventListener('keydown', (e) => {
let w = galleryResize.offsetWidth;

if (e.keyCode === 39) {
nextPhoto();
} else if (e.keyCode === 37) {
prevPhoto();
} else if (e.keyCode === 38) {
galleryResize.classList.remove('tr');
w = w + 50;
getW(w);
if (w > gallery.offsetWidth) {
galleryResize.style.width = '100%';
}
} else if (e.keyCode === 40) {
galleryResize.classList.remove('tr');
w = w - 50;
getW(w);
}
});

const title = createSpanCount(countPhoto);
wrapper.append(title);

function nextPhoto() {
count++;
countPhoto++;
title.innerHTML = `${countPhoto} / ${photoBeforeArray.length}`;
photoBefore.src = photoBeforeArray[count];
photoAfter.src = photoAfterArray[count];
photoName.textContent = photoNames[count];
galleryResize.style.width = '50%';
galleryResize.classList.add('tr');
if (count >= photoBeforeArray.length) {
count = 0;
countPhoto = 1;
photoBefore.src = photoBeforeArray[count];
photoAfter.src = photoAfterArray[count];
photoName.textContent = photoNames[count];
title.innerHTML = `${countPhoto} / ${photoBeforeArray.length}`;
}
}

function prevPhoto() {
count--;
countPhoto--;
photoBefore.src = photoBeforeArray[count];
photoAfter.src = photoAfterArray[count];
photoName.textContent = photoNames[count];
title.innerHTML = `${countPhoto} / ${photoBeforeArray.length}`;
if (count < 0) {
count = photoBeforeArray.length - 1;
countPhoto = photoBeforeArray.length;
photoBefore.src = photoBeforeArray[count];
photoAfter.src = photoAfterArray[count];
photoName.textContent = photoNames[count];
title.innerHTML = `${countPhoto} / ${photoBeforeArray.length}`;
}
}

function createSpanCount(n) {
const title = document.createElement('h1');
title.id = 'photo-count';
title.innerHTML = `${n} / ${photoBeforeArray.length}`;
return title;
}

function getW(n) {
galleryResize.style.width = n + 'px';
if (n > gallery.offsetWidth) return;
}
});
</script>

<div class="slider-wrapper">
<div class="wrapper">
<span id="before" class="btn">Før</span>
<span id="after" class="btn">After</span>
<span id="left" class="btn"><i class="fa-solid fa-arrow-left"></i></span>
<span id="right" class="btn"><i class="fa-solid fa-arrow-right"></i></span>
<div class="gallery">
<img
src="https://cdn.fs.teachablecdn.com/uSqKRhLtQmgMyDvdby9Q"
alt=""
class="img img-after"
/>
<div class="gallery__resize">
<img
src="https://cdn.fs.teachablecdn.com/v7UiewjzS3Kprfpob2hB"
alt=""
class="img img-before"
/>
</div>
</div>
<span id="photo-name">Image 1</span>
</div>
</div>

Ler mais
Publicado em de John S.