zoom immagine

pierlu · 2015-03-14 10:43:45

Salve a tutti dovrei impostare lo zoom alle immagini del sito. Ho scaricato e installato il plugin jquery “Magnif popup”. Ho provato a scrivere su text pattern il seguented codice html:
<a class=“zoom” href src=”{url}”><img src=”{thumburl}” alt=”{alt}” /></a>

ma non succede niente cosa sbaglio?=

jakob · 2015-03-14 13:21:04

I’m guessing here slightly what you want but try:

<txp:images id="1,2,3,4,5" wraptag="ul" break="li">
  <a class="zoom" href="<txp:image_url />">
    <img src="<txp:image_url thumnail="1" />" alt="<txp:image_info type="alt" />">
  </a>
</txp:images>

You can replace id="1,2,3,4,5" with the id#s you want, or instead of id use category="image-category-name" to draw in all images from a particular image category.

Or, if you want to show the zoom for an image in the “article image” field of your article, use:

<txp:images id='<txp:custom_field name="article_image" />' wraptag="ul" break="li">

for the first line (note the single quotes when using a txp:tag as an attribute for another txp:tag.

pierlu · 2015-03-15 21:53:32

Ho scritto così, ma non ho il risultato desiderato:
*<txp:images category=“galleria-crisciolette” wraptag=“ul” break=“li” >
<a class=“zoom”> href=”<txp:image_url />”> <img src=”<txp:image_url thumnail=“1” />” >
</a>
</txp:images>*

vorrei quando si clicca su una foto ottenessi lo zoom

uli · 2015-03-15 22:08:49

Try removing the closing angle bracket immediately after zoom and put a “b” into thumbnail.

gaekwad · 2015-03-15 22:25:11

Hi pierlu – quando si sta digitando il codice qui, digita bc. prima. Questo è utile con vista formattazione.

esempio:

bc. <txp:tag />

Che renderà come:

<txp:tag />

bici · 2015-03-16 03:47:34

uli wrote #289093:

Try removing the closing angle bracket immediately after zoom and put a “b” into thum*b*nail.

<a class="zoom" href="<txp:image_url />"> <img src="<txp:image_url thumbnail="1" />" >

Edit: fixed smart/fancy quotes.

Last edited by gaekwad (2015-03-16 09:45:56)

pierlu · 2015-03-16 14:07:05

Ho provato, ma mi sono sparite le foto

pierlu · 2015-03-16 20:58:19

Per avere lo zoom con il plugin “magnific popup” ho scritto:l
nella head ho incluso il plugin: <script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script> <script src=“assets/js/magnificpopup.js”></script>
<script src=“js/slide.js”></script> <script type=“text/javascript” src=“assets/js/generale.js”></script>

ho fatto inoltre una call jquery:
$(document).ready(function(){ $(‘.popup’).magnificPopup({ type: ‘image’, gallery:{ enabled: true } });
})

però non ho ottenuto il popup. perchè?

jakob · 2015-03-16 21:19:55

Check that all your javascript files are actually loading. You have some starting assets/js/… and some starting js/… and they are all relative paths, i.e. they load relative to the page you are on = if you are on the /gallery section, it will look in /gallery/assets/js/… for your script files. Try:

<script src="<txp:site_url/>assets/js/magnificpopup.js"></script>

Also check that the copy of magnific popup you are using works with the old version of jQuery you are using. The magnific popup docs state jQuery 1.7.2+ or Zepto.js 1.0+ is necessary.

And finally, you don’t say if you load the css at all.

My guess is you need something like this:

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="<txp:site_url />assets/css/magnific-popup.css"> 

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!-- Magnific Popup core JS file -->
<script src="<txp:site_url />assets/js/jquery.magnific-popup.js"></script>

<!-- Your other scripts in the /assets/js/ folder -->
<script src="<txp:site_url />assets/js/slide.js"></script> 
<script src="<txp:site_url />assets/js/generale.js"></script>
<script>
  $(document).ready(function(){ 
    $('.popup').magnificPopup({ 
      type: 'image', 
      gallery: { 
        enabled: true 
      } 
    });
})
</script>

and then

<ul class="galleryart">
  <li>
    <a class="popup" href="{url}"><img src="{thumburl}" /></a>
  </li>
</ul>

(or what you’re using to get the right output from smd_gallery. In your example you have li tags in a div, but it should be in a ul)

pierlu · 2015-03-17 18:54:40

Sono quasi riuscito, peràò vorrei che lo zoom venisse tipo così: http://dimsemenov.com/plugins/magnific-popup/
tipo “lightbox gallery”
ho incluso nella head il plugin magnific popup

 <link rel="stylesheet" href="<txp:site_url />assets/css/magnificpopup.css" type="text/css" media="screen" />
 <!--plugin slideshow-->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
 <script src="<txp:site_url />assets/js/magnificpopup.js"></script>
<script src="text/javascript" src="<txp:site_url />assets/js/generale.js"></script>
</script>

ho fatto una call jquery

$(document).ready(function() {
	$('.popup').magnificPopup({
		delegate: 'a',
		type: 'image',
		tLoading: 'Loading image #%curr%...',
		mainClass: 'mfp-img-mobile',
		gallery: {
			enabled: true,
			navigateByImgClick: true,
			preload: [0,1] // Will preload 0 - before current, and 1 after the current image
		},
		image: {
			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
			titleSrc: function(item) {
				return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
			}
		}
	});
});

in html

<div class="popup"><a href="{url}"> <img src="{thumburl}" /></a></div>

grazie mille

EDIT: please use bc.. before your pasted code, and then p. to return to text. It makes it much easier for us to read:

bici · 2015-03-18 02:41:40

se non funziona e perché le js/files non sono nell path come dici jakob

pierlu · 2015-03-22 20:08:26

Con il linguaggio css posso dare delle dimensioni allo zoom ?é

John-Paul F · 2021-08-31 09:35:52

I’m really struggling with galleries, sliders, pop-ups.

I’ve saved Magnific to a folder in the home directory of my site, as suggested here

I’ve added this code to the head:


<!-- JPF trying to work out where to put this - Magnific Popup CSS -->
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="<txp:site_url />assets/css/magnific-popup.css"> 

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!-- Magnific Popup core JS file -->
<script src="<txp:site_url />assets/js/jquery.magnific-popup.js"></script>

<!-- Your other scripts in the /assets/js/ folder -->
<script src="<txp:site_url />assets/js/slide.js"></script> 
<script src="<txp:site_url />assets/js/generale.js"></script>
<script>
  $(document).ready(function(){ 
    $('.popup').magnificPopup({ 
      type: 'image', 
      gallery: { 
        enabled: true 
      } 
    });
})
</script>

And I’ve added this HTML to a page:

<txp:images id="1323,1324,1325,1326" wraptag="div" break="" class="">
  <a href="<txp:image_url />" title="<txp:image_info type="caption" />">
    <img src="<txp:image_url thumbnail="1" />" width="<txp:image_info type="thumb_w" />" height="<txp:image_info type="thumb_h" />">
  </a>
</txp:images>

When I click on an image, it takes me to the URL for that image, but there’s no way to move forward through images.

Any suggestions?

Bloke · 2021-08-31 10:47:18

Hmmm, anything in the browser’s console that gives you a clue? Maybe the script isn’t being loaded or something.

John-Paul F · 2021-08-31 14:07:14

Bloke wrote #331474:

Hmmm, anything in the browser’s console that gives you a clue? Maybe the script isn’t being loaded or something.

Aha!

I didn’t know quite what that even meant, but remembered Firefox has Tools/Web Developer/Web Console, and this is what I found:

Blocked loading mixed active content "http://addtocalendar.com/atc/1.5/atc-style-blue.css"
textpattern
Feature Policy: Skipping unsupported feature name “payment”. v3:1:43442
Feature Policy: Skipping unsupported feature name “payment”. v3:1:43581
Blocked loading mixed active content "http://addtocalendar.com/atc/1.5/atc-style-blue.css"
textpattern
Some cookies are misusing the recommended “sameSite“ attribute 5
Loading failed for the <script> with source “https://flintoff.org/assets/js/jquery.magnific-popup.js”. textpattern:69:1
Loading failed for the <script> with source “https://flintoff.org/assets/js/slide.js”. textpattern:72:1
Loading failed for the <script> with source “https://flintoff.org/assets/js/generale.js”. textpattern:73:1
Feature Policy: Skipping unsupported feature name “payment”. v3:1:42703
Uncaught TypeError: $(...).magnificPopup is not a function
    <anonymous> (index):76
    jQuery 4
textpattern:76:17
Request to access cookie or storage on “https://stats.g.doubleclick.net/j/collect?t=dc&aip=1&_r=3&v=1&_v=j93&tid=UA-93161266-1&cid=1414722234.1604921454&jid=1579429117&gjid=722547583&_gid=2082544116.1630351177&_u=AACAAEAAAAAAAC~&z=1340596566” was blocked because it came from a tracker and content blocking is enabled.

Does that make any sense? I’m out of my depth here.

Textpattern CMS

Textpattern CMS support forum

#1 2015-03-14 10:43:45

zoom immagine

#2 2015-03-14 13:21:04

Re: zoom immagine

#3 2015-03-15 21:53:32

Re: zoom immagine

#4 2015-03-15 22:08:49

Re: zoom immagine

#5 2015-03-15 22:25:11

Re: zoom immagine

#6 2015-03-16 03:47:34

Re: zoom immagine

uli wrote #289093:

#7 2015-03-16 14:07:05

Re: zoom immagine

#8 2015-03-16 20:58:19

Re: zoom immagine

#9 2015-03-16 21:19:55

Re: zoom immagine

#10 2015-03-17 18:54:40

Re: zoom immagine

#11 2015-03-18 02:41:40

Re: zoom immagine

#12 2015-03-22 20:08:26

Re: zoom immagine

#13 2021-08-31 09:35:52

Re: zoom immagine

#14 2021-08-31 10:47:18

Re: zoom immagine

#15 2021-08-31 14:07:14

Re: zoom immagine

Bloke wrote #331474:

Board footer