Jump to content
TNG Community
pipsi

solved // Template 4: Main image (home page) make zoomable

Recommended Posts

pipsi

I uploaded a new main image to the home page (it works ;)

Is it possible that this main image can be zoomed?

for example, I have some images on my intro page to zoom in - see here:

https://www.schuster-pippersteiner.at/genealogie/TNG/extrapgs/Intro Schuster-Pippersteiner.php

for this I have saved the following input in the shellpage:

<style>
.zoom {
  padding: 10px;
  transition: transform .2s; /* Animation */
  width: 200px;
  margin: 0 auto;
}
 .zoom:hover {
  transform: scale(1.8); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>

and then in the Intro Schuster-Pippersteiner.php which I uploaded to languages/German-UTF8 folder in the respective picture the following (e.g.):

<p><a href=" <?php echo $cms['tngpath']; ?>showmedia.php?mediaID=618"><img src="../photos/Urgroßeltern Pippersteiner.jpg" alt="Urgroßeltern Pippersteiner" class="zoom" width="270"/></a>
</br><i>Urgroßeltern Lorenz & Josefa Pippersteiner (zoom!)</i></p>

 

My questions:
1. is that even possible? and if so
2. where should I enter the <style> input?
3. and should I then replace the class="bigphoto" in index.php with class="zoom"?

<?php
                //begin MAIN IMAGE (default: large picture of Main Street, Mt. Pleasant, Utah, ca. 1915)
                //Actual file name has been replaced with t4_mainimage variable, configurable from Template Settings. Default name of actual image is "bigphoto.jpg"
                //You can replace the t4_mainimage PHP block in the line below with the desired image name if you prefer that to using the Template Settings.
?>
                                                                              <img src="<?php echo $cms['tngpath'] . $templatepath; ?><?php echo $tmp['t4_mainimage']; ?>" alt="" class="bigphoto" width="550" /><br />
<?php
                //end MAIN IMAGE
?>

thank you so much for your answers in advance!

Ingrid

Share this post


Link to post
Share on other sites
bhemph

Ingrid,
     I added your zoom styles to mytngstyle.css in template4 and set the image in the template settings with the zoom class.  The bigphoto class was automatically dropped from the output in my local test, although when I got both classes together the zoom width always seemed to win over the bigphoto width.  To get the original photo on the index page to show at 100% instead of 200 px wide, I ended up having to set that as the width in the zoom class.

Brent

Zoom.png

Share this post


Link to post
Share on other sites
pipsi
vor einer Stunde schrieb bhemph:

Ingrid,
     I added your zoom styles to mytngstyle.css in template4 and set the image in the template settings with the zoom class.  The bigphoto class was automatically dropped from the output in my local test, although when I got both classes together the zoom width always seemed to win over the bigphoto width.  To get the original photo on the index page to show at 100% instead of 200 px wide, I ended up having to set that as the width in the zoom class.

Brent

Zoom.png

@bhemph  Brent,

Thank you very much for your test!

I hope that I understand your approach correctly:

I have now entered the following in template4  as the last entry in my mytngstyle.css:

<style>
.zoom {
  padding: 10px;
  transition: transform .2s; /* Animation */
  width: 200px;
  margin: 0 car;
}
 .zoom:hover {
  transform: scale(1.8); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
</style>

 

I then added the following to my Main img (home page) in the Template settings:

img/Ahnen Schuster-Pippersteiner.jgp" class="zoom

and I added the class="zoom" in the index.php as follows:

<img src="<?php echo $cms['tngpath'] . $templatepath; ?><?php echo $tmp['t4_mainimage']; ?>" alt=""" class="zoom" class="bigphoto" width="550" /><br />

 

then of course ctrl F5 after upload - but the picture has no zoom! what have I done wrong?

 

Ingrid

Share this post


Link to post
Share on other sites
bhemph

Ingrid,
     Being a css file, you don't need the <style> and </style> tags around the zoom styles since the whole file is considered to be of that type.  Removing those tags should fix the zoom.

Brent

Share this post


Link to post
Share on other sites
pipsi
vor 1 Stunde schrieb bhemph:

Ingrid,
     Being a css file, you don't need the <style> and </style> tags around the zoom styles since the whole file is considered to be of that type.  Removing those tags should fix the zoom.

Brent

@bhemph 

 

Brent,

thank you! 

I have corrected this in mytngstyle.css accordingly

zoom does not work yet ...
pls  see attachments - first two from chrome, third from firefox:
the mouse over text of the yellow warnings says:
unknown proberty name

Ingrid

zoom1.PNG

unknown.PNG

zoom2.PNG

Share this post


Link to post
Share on other sites
bhemph
.zoom {
  padding: 10px;
  transition: transform .2s; /* Animation */
  width: 200px;
  margin: 0 auto;
}
.zoom:hover {
  transform: scale(1.8); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

works for me.  I removed the space in front of .zoom:hover which removes those A with carets and I kept the original auto, since that car in your example seems to create problems as well.

Share this post


Link to post
Share on other sites
pipsi
vor 11 Stunden schrieb bhemph:

.zoom {
  padding: 10px;
  transition: transform .2s; /* Animation */
  width: 200px;
  margin: 0 auto;
}
.zoom:hover {
  transform: scale(1.8); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

works for me.  I removed the space in front of .zoom:hover which removes those A with carets and I kept the original auto, since that car in your example seems to create problems as well.

@bhemph Brent,

thank you again!

that's what I've all done now - see attachments

... but still no zoom 

have a nice sunday!
Ingrid

 

indexphp.PNG

mytngstylecss.PNG

template settings_main image.PNG

Share this post


Link to post
Share on other sites
bhemph

Ingrid,
     When I look at the inspection in Chrome it has the A with a caret in front of all but the margin now.  So I looked at the sources to see what Chrome sees in the file and saw the following.  Those A caret must be a BOM, or something else that is not visible when you are editing in Notepad++ but is visible to the browsers and interfering with the zoom class displaying in the page.

Brent

css.png

Share this post


Link to post
Share on other sites
pipsi

Brent,

thank you again, I'll check that!

Ingrid

Share this post


Link to post
Share on other sites
pipsi

juhuuuuuuuuuuuuuuu 😊 😍

zoom availiable!

I had spaces on the left side, I've removed them now!

Brent - Thank you so much for your patience!

have a good rest of sunday! greetings from Vienna!

Ingrid

 

zoom mytngstyle.PNG

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×