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

[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

[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

[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

@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

[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

[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

[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.

[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

 

[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

[pipsi]

Brent,

thank you again, I'll check that!

Ingrid

[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