Search…

X3 Photo Gallery Support Forums

Search…
 
trpgforum
Experienced
Topic Author
Posts: 105
Joined: 05 Jul 2019, 03:40

Pictures in Text with Link: Hover-Effect and more...

17 Jan 2022, 16:48

Hello Karl

The individual images of a gallery page or folder pages have wonderful hover effects with the magnifying glass icon or the asterix icon symbol, which visualizes that I can open the link to the image or page with a click. How can I achieve the same hover effects for individual images with links that I have manually inserted into the text (content) of a page? Although I already control some things with CSS on my website www.thomas-ruf.ch, I haven't managed to do it yet. For example at www.thomas-ruf.ch/referenzen/

I would be very grateful for support! Best regards from Basel Thomas
THOMAS RUF PHOTOGRAPHY
Landscape - Nature - Macro
4132 Muttenz
Switzerland
www.thomas-ruf.ch
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Pictures in Text with Link: Hover-Effect and more...

17 Jan 2022, 23:11

Yes, there are some built-in classes in X3 that create the hover effects like you have on the home page. It might be possible to use them for your custom content layout, and if not, we could probably just copy the CSS and adjust it slightly. One thing though: In your /referenzen/ page, I don't see any <a> links just some <button>Details</button> that can be clicked ... With this effect, the entire block (image+text) should be clickable, because that is what the effect insinuates. Also, although not directly related, it seems you are using some <span data-href=""> in your custom code? That is used in X3, but only as a workaround for external links when the html is inside an <a> tag, because it's not allowed in html with "nested" anchor links <a><a></a></a>.
 
trpgforum
Experienced
Topic Author
Posts: 105
Joined: 05 Jul 2019, 03:40

Re: Pictures in Text with Link: Hover-Effect and more...

19 Jan 2022, 04:54

Thank you for your quick reply!

Unfortunately I didn't manage to get a hover effect on my hidden test page when hovering over the image. See https://www.thomas-ruf.ch/test/
Code
<h2>Angebot</h2>
<a href="../angebot" title="Angebot"><img src="/content/test/test_1.png" width="300"></a>
<p>Wir bieten Ihnen zahlreiche erstklassige Bilder aus unserem umfangreichen Archiv</p>
How do I have to expand the code above on this test-site so that when I move over the image (possibly including the title and short text belonging to the image), a red star icon (asterix) can be seen, as on the page https://www.thomas-ruf.ch/fotogalerien/ when hovering over a gallery thumbnail? 
THOMAS RUF PHOTOGRAPHY
Landscape - Nature - Macro
4132 Muttenz
Switzerland
www.thomas-ruf.ch
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Pictures in Text with Link: Hover-Effect and more...

20 Jan 2022, 01:35

I'm gonna be straight-forward: That effect was specifically created for X3's folders and galleries layouts, which follow a very html specific structure, with a hierarchy of elements with CSS styles that allow the style to apply correct. Even if that style was available to use in custom content, you can't slap it onto an element without conforming that element.
Image

I spent some time hacking a solution which partially works:
Code
<div class="folders hover">
  <p class="img-link">
    <a href="../angebot" title="Angebot" class="img-link-style image-container" style="display: block;"><img src="/content/test/test_1.png" width="300">
    </a>
  </p>
</div>
At best a "hack" that may require further custom CSS modifications. The BEST solution however would probably be to create a separate CSS style that suits your content structure and gives the same (or similar) output as the style in X3. I can't spend several hours writing custom styles/layouts/css/html like this and providing documentation though, or at least I need to request some minimal fee (else I can't afford it).
 
trpgforum
Experienced
Topic Author
Posts: 105
Joined: 05 Jul 2019, 03:40

Re: Pictures in Text with Link: Hover-Effect and more...

20 Jan 2022, 02:20

Thank you for your great support, Karl!

I'll be happy to play around with the hack first. If the whole thing still seems important to me, I would of course be happy to pay you for the effort. I wouldn't expect it to be free either. But let's just wait and see; You don't need to do anything else.

Thanks and best regards
Thomas 
THOMAS RUF PHOTOGRAPHY
Landscape - Nature - Macro
4132 Muttenz
Switzerland
www.thomas-ruf.ch
 
User avatar
TristanJo
Experienced
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Pictures in Text with Link: Hover-Effect and more...

26 Dec 2022, 07:34

mjau-mjau wrote: I'm gonna be straight-forward: That effect was specifically created for X3's folders and galleries layouts, which follow a very html specific structure, with a hierarchy of elements with CSS styles that allow the style to apply correct. Even if that style was available to use in custom content, you can't slap it onto an element without conforming that element.
Image

I spent some time hacking a solution which partially works:
Code
<div class="folders hover">
  <p class="img-link">
    <a href="../angebot" title="Angebot" class="img-link-style image-container" style="display: block;"><img src="/content/test/test_1.png" width="300">
    </a>
  </p>
</div>
At best a "hack" that may require further custom CSS modifications. The BEST solution however would probably be to create a separate CSS style that suits your content structure and gives the same (or similar) output as the style in X3. I can't spend several hours writing custom styles/layouts/css/html like this and providing documentation though, or at least I need to request some minimal fee (else I can't afford it).
Hi Karl~~

I saw this post and applied it, but it's not working well. 

Would you look at my site?
Code
<div class="row"> 
  <div class="columns">
<center markdown=1><font class="Rancho-Regular"><br>아래 파노라마 사진을 클릭 후 확대해 보세요.</font></center>
<div class="gallery hover">
<div class="frame">
<div class="img-link">
<figure class="unveiled">
<div class="image-container">
<a href="{{path}}seoul.png" data-panorama="path=_seoul&amp;tilesize=510&amp;width=260,521,1042,2084,4169,8339,16678,33357&height=101,202,405,811,1622,3245,6491,12982&url_format=tiles/node1/cf_%c/l_%l/c_%x/tile_%y.jpg" class="img-link-style image-container" style="display: block;"><img src="{{path}}seoul.png" alt="서울 야경 고화질 파노라마" />
<figcaption itemprop="caption description">
<span class="title">서울 야경 고화질 파노라마</span>
<span class="description">
Width: 33357 Height: 12982<br>
Ratio: 2.569<br>
433.04 megapixels (433040574 pixels)
</span>
</figcaption>
</a>
</div>
</figure>
</div>
</div>
</div>
</div>
</div>
Plz~~:upside_down:
Last edited by TristanJo on 27 Dec 2022, 12:10, edited 1 time in total.
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Pictures in Text with Link: Hover-Effect and more...

26 Dec 2022, 23:36

You mean for the top image? Replace class="gallery hover" with this:
Code
class="gallery x3-hover-icon-asterisk-primary"
 
User avatar
TristanJo
Experienced
Posts: 116
Joined: 10 Apr 2018, 02:57

Re: Pictures in Text with Link: Hover-Effect and more...

27 Dec 2022, 12:09

mjau-mjau wrote: You mean for the top image? Replace class="gallery hover" with this:
Code
class="gallery x3-hover-icon-asterisk-primary"
Thx~ karl~~~