Differences

This shows you the differences between two versions of the page.

--- en:create:images [10.06.2018 20:17] – admin
+++ en:create:images [26.04.2025 22:15] (current) – [Zoom function] amhof
@@ Line 28: / Line 28: @@
 <code html>
 <div style="text-align: center; margin: 40px 0">
-  <img src="image.jpg" alt="Image of a Woman">
+  <img src="image.jpg" alt="Image of a Woman" style="max-width: 100%;">
 </div>
 </code>
@@ Line 35: / Line 35: @@
 <code html>
-<img src="image.jpg" alt="Image of a Woman" style="float: right; margin-left: 10px">
+<img src="image.jpg" alt="Image of a Woman" style="float: right; margin-left: 10px; max-width: 100%;">
 Please look closely at the image on the right.
 Afterwards, please evaluate the image in light of the statements that can be read below.
@@ Line 43: / Line 43: @@
 <code html>
-<img src="image.jpg" alt="Image of a Woman" class="right">
+<img src="image.jpg" alt="Image of a Woman" class="right" style="max-width: 100%;">
 Please look closely at the image on the right.
 </code>
@@ Line 98: / Line 98: @@
 |Photo (JPG)\\ 85% Quality|Photo (JPG)\\ 15% Quality|Reduced to 8 Colors\\ (PNG)|Graphic (PNG)\\  8 Colors|Graphic (PNG)\\ 8 Colors|
+==== File Name ====
+The widely used plug-in "uBlock Origin" identifies certain file names as advertisements. Avoid file names that start with an "AD" (for example, "AD1_new.jpeg"). Test your questionnaire in different browsers and with active ad blockers.
@@ Line 128: / Line 132: @@
 <code html>
 <p>Text above the image.</p>
-<p><img src="image.gif" alt="Pink Elephant"></p>
+<p><img src="image.gif" alt="Pink Elephant" style="max-width: 100%;"></p>
 <p>Text below the image.</p>
 </code>
@@ Line 136: / Line 140: @@
 <code html>
 <h1>Welcome</h1>
-<p><img src="https://www.soscisurvey.de/homepage/sosci.logo.png" alt="SoSci Survey" class="right">
+<p><img src="https://www.soscisurvey.de/homepage/sosci.logo.png" alt="SoSci Survey" class="right" style="max-width: 100%;">
 This example demonstrates how an image can be positioned to the right of the text.</p>
 </code>
@@ Line 170: / Line 174: @@
 {{:de:create:scr.images.labels.result.png?nolink|Images in Labeling of Scales}}
+===== Zoom function =====
+SoSci Survey provides CSS classes so that you can use a simple zoom function for images. To do this, add a “”<a>“” tag with the “'s2zoom2x”' class. In the image itself, use the “'style”' attribute to define a reduction in size.
+<code html>
+<a href="#" class="s2zoom2x"><img src="example.jpg" alt="" style="width: 80px"></a>
+</code>
+The above example enlarges an image both when it is touched with the mouse (''hover'') and when it is tapped or clicked (''focus''), because on touch devices (e.g. on a smartphone) it is possible to zoom in. devices (e.g. smartphones) do not offer the option of moving the mouse pointer over an image.
+If the image should only react to the touch of the mouse, you can also simply add the class ''s2zoom2x'':
+<code html>
+<img src="example. jpg" alt="" style="width: 80px" class="s2zoom2x">
+</code>
+The following classes are available:
+  * ''s2zoom2x'' -- 2x magnification
+  * ''s2zoom3x'' -- 3x magnification
+  * ''s2zoom4x'' -- 4x magnification
+For a different magnification, you can adapt the following CSS code and use it in your layout.
+<code css>
+a.s2zoom img,
+img.s2zoom {
+   transition: transform .2s;
+}
+a.s2zoom:focus img,
+a.s2zoom:hover img,
+img.s2zoom:hover {
+   transform: scale(1.6);
+   box-shadow: -0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.4);
+}
+</code>