Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
en:create:images [10.06.2018 20:17] adminen:create:images [26.04.2025 22:15] (current) – [Zoom function] amhof
Line 28: Line 28:
 <code html> <code html>
 <div style="text-align: center; margin: 40px 0"> <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> </div>
 </code> </code>
Line 35: Line 35:
  
 <code html> <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. Please look closely at the image on the right.
 Afterwards, please evaluate the image in light of the statements that can be read below.  Afterwards, please evaluate the image in light of the statements that can be read below. 
Line 43: Line 43:
  
 <code html> <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. Please look closely at the image on the right.
 </code> </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| |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> <code html>
 <p>Text above the image.</p> <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> <p>Text below the image.</p>
 </code> </code>
Line 136: Line 140:
 <code html> <code html>
 <h1>Welcome</h1> <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> This example demonstrates how an image can be positioned to the right of the text.</p>
 </code> </code>
Line 170: Line 174:
  
 {{:de:create:scr.images.labels.result.png?nolink|Images in Labeling of Scales}} {{: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>
 +
 +
en/create/images.1528654634.txt.gz · Last modified: by admin
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki