WebSite X5Help Center

 
Grigorios A.
Grigorios A.
User

Page design  en

Auteur : Grigorios A.
Visité 2061, Followers 4, Partagé 0  

Please anyone knows how I can create a hide drop-down description with a photo and be visible dependence the choice of info want the visitor?  Like the photo. 

Posté le
17 RéPONSES - 2 UTILE
Esahc ..
Esahc ..
Moderator

Grigorios, perhaps a link the the actual page where you took the screen shot would allow us to more closely answer your request? Unfortunately you are only using the demo version of v13 pro which is pretty old.

I believe you could come up with something similar using a text object and a series of tabs which could display as a slide show or with tab selections for the users.

With the latest versions of WX5 there is also the option of content slider or you may prefer to use the optional accordian text next to an image.

Lire plus
Posté le de Esahc ..
John S.
John S.
User

In  the accordion it is possible to have an image.

Example :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius magna a ligula gravida porta. Morbi quis ornare lectus. Maecenas euismod maximus tincidunt. Aliquam id ornare sem.
fdsfdsaf
<img src="URL_to_image" align="left" height=50" onmouseover="this.height=150;" onmouseout="this.height=50;">

If you put this in one of the accordion-boxes, then you will have some text with an image. When the image is hovered it will be enlarged.

Of course you have to change the "URL_to_image" to an URL for the image.

This way the image will also be "hidden" when the accordion item is not chosen. And it will appear as the accordion item is chosen

You could also have a link in the text - or have the image being a text.

Lire plus
Posté le de John S.
John S.
John S.
User

I have an example here : http://eksempelsite.dk/operational-accordion.html

The accordion used here is not the X5 accordion but an accordion I made myself. But the possibility with the image in the accordion text is also possible in the X5-accordion.

Try click on the accordion and see the image appear - and try to hover the image.

Exactly this effect you can have in the X5-accordion.

Lire plus
Posté le de John S.
John S.
John S.
User

Here is an example made with the X5-accordion : http://eksempelsite.dk/sparta02/bullet-list---kopier4.html#Anchor02

Content of box 1 

Click an item for further description

Content of box 2

<img src="http://www.energifremtiden.dk/c4d/materiale/copenhagenim_citadel.jpg" style="padding:5px" align="left" height=150" onmouseover="this.height=250;" onmouseout="this.height=150;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius magna a ligula gravida porta. Morbi quis ornare lectus. Maecenas euismod maximus tincidunt. Aliquam id ornare sem.

Content of box 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius magna a ligula gravida porta. Morbi quis ornare lectus. Maecenas euismod maximus tincidunt. Aliquam id ornare sem.
fdsfdsaf
<img src="http://www.energifremtiden.dk/c4d/materiale/copenhagenim_mermaid.jpg" align="left" height=50" onmouseover="this.height=150;" onmouseout="this.height=50;">

Hope it was something like this you meant.

Lire plus
Posté le de John S.
John S.
John S.
User

@Henk

This is a bit off-topic, as I only used the example to show about the image in the accordion items.

If you make a new thread, then we could take it from therewink

Lire plus
Posté le de John S.
Esahc ..
Esahc ..
Moderator

Grigorios, for future posts I recommend you log into the helpcenter with the email address and password used when you purchased v2019 so we can give the most appropriate reply.

The new content slider is not an accordian, but it does look good and handles responsive display quite well but if you wish to persue an acordian style layout I am sure John's instructions will do the trick.

Lire plus
Posté le de Esahc ..
John S.
John S.
User

I can see that you have made a new userid. I continued on the post Esahc refer to.

A new example has been made here : http://eksempelsite.dk/sparta02/marine.html

If this is close to what you ask for, I can give the tex/tcode used in some of the boxes. I used the standard X5-accordion.

If it is not what you mean, then I hope someone else can help you.

Lire plus
Posté le de John S.
Esahc ..
Esahc ..
Moderator

John, I am very impressed!!

Whilst I avoid code like the plaque (I bought WX5 because I do not like thinking and in the past I have used code that in later versions stopped working when Incomedia chose to use a few variables I had made up as internal variables), your solution for adding an image to the accordion is wonderful (I have needed to do this for ages). Many thanks!!

Lire plus
Posté le de Esahc ..
John S.
John S.
User

@Thanks Esahcsmile

Although I have shown something before, then here is the code:

Code for box 2

<img src="https://www.mieconsultancy.com/images/ship-inspections.jpg" style="padding:5px" align="left" height=150" onmouseover="this.height=250;" onmouseout="this.height=150;">Our shipping consultancy services include customized modular packages to cater to individual client needs. We understand that every ship-owner/Manager's needs special attention to analyze and strengthen only particular aspects of operation and management. We provide tailor-made solutions for every aspect of marine operation and management.

Code for box 3 ( only the image position is changed - right )

<img src="https://www.mieconsultancy.com/images/Pre-Purchase.jpg" style="padding:5px" align="right" height=150" onmouseover="this.height=250;" onmouseout="this.height=150;">A pre-purchase survey is a thorough evaluation of the entire vessel's structure, systems, equipment and machinery which also includes a detailed description of the vessel and summarizing possible recommendations required to bring the vessel to the acceptable standards.

Code for box 6 ( in here is also a link that is made white )

src="https://www.mieconsultancy.com/images/1sm.jpg" style="padding:5px" align="left" height=150" onmouseover="this.height=250;" onmouseout="this.height=150;">At the forefront of the maritime evolutionary progress.
Being at the forefront of the maritime evolutionary progress we aim to conceive the forthcoming changes in the field and prepare all parties involved for their implementation.
Here is a <a href="http://calendarforum.dk/" target="_blank" style="color:white">Testlink</a> that directs to the calendarforum.dk in a new tab.

Boxes 4 +5 is made with the same princip.

The images could also have been made clickable links. I made a box 7 to show this :

<img src="https://www.mieconsultancy.com/images/1sm.jpg" height="43" onclick="window.open('http://www.calendarforum.dk/restaurant/book-table.html','popup','width460,height640'); return false;" align="left">At the forefront of the maritime evolutionary progress.
Being at the forefront of the maritime evolutionary progress we aim to conceive the forthcoming changes in the field and prepare all parties involved for their implementation.
Here is a <a href="http://calendarforum.dk/" target="_blank" style="color:white">Testlink</a> that directs to the calendarforum.dk in a new tab.

http://eksempelsite.dk/sparta02/marine.html

You can combine as you wish.

If you need further assistance about this, then I suggest you make a link for the page where you have the accordion, and then explain what the problem is. Then I or another here on the forum will help you - I am sure.

Good luck with the accordion.

Lire plus
Posté le de John S.
John S.
John S.
User

Correction :

If you need further assistance about this, then I suggest you make a new post and a link for the page where you have the accordion, and then explain what the problem is. 

Lire plus
Posté le de John S.
John S.
John S.
User

Da..  Additional correction :

If you need further assistance about this, then I suggest you make a new thread and a link for the page where you have the accordion, and then explain what the problem is. 

Lire plus
Posté le de John S.
JiPeR 48
JiPeR 48
Moderator
Meilleur utilisateur du mois FR

Hi all,

Nice work John!

I had explained (on the French forum in August 2019), but in a more basic way, this possibility of improving the accordion object with links, videos and images.

I was inspired by the ideas of "Axel Software" and your intervention! wink

https://helpcenter.websitex5.com/fr/post/216055

Your demonstration is breathtaking, thank you !! 

J.P.

Lire plus
Posté le de JiPeR 48
John S.
John S.
User

I think I have made only one "heart" post : https://helpcenter.websitex5.com/fr/post/197999

It was made just after the text-accordion was announced. ( some links does not lead to the expected result anymore). I was happy to see that INCOMEDIA had listened to us users.

At the moment I does not use the X5 software. Only to create examples. But I will still be active here on the forum, I think.

I don't know the purpose with us humans - but one could be to help and inspire where we can.

Lire plus
Posté le de John S.