Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2015-03-14 10:43:45
- pierlu
- Member
- Registered: 2014-08-12
- Posts: 153
zoom immagine
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?=
Offline
Re: zoom immagine
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.
TXP Builders – finely-crafted code, design and txp
Offline
#3 2015-03-15 21:53:32
- pierlu
- Member
- Registered: 2014-08-12
- Posts: 153
Re: zoom immagine
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
Offline
#4 2015-03-15 22:08:49
- uli
- Moderator
- From: Cologne
- Registered: 2006-08-15
- Posts: 4,303
Re: zoom immagine
Try removing the closing angle bracket immediately after zoom
and put a “b” into thumbnail.
In bad weather I never leave home without wet_plugout, smd_where_used and adi_form_links
Offline
Re: zoom immagine
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 />
Offline
Re: zoom immagine
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)
…. texted postive
Offline
#7 2015-03-16 14:07:05
- pierlu
- Member
- Registered: 2014-08-12
- Posts: 153
Re: zoom immagine
Ho provato, ma mi sono sparite le foto
Offline
#8 2015-03-16 20:58:19
- pierlu
- Member
- Registered: 2014-08-12
- Posts: 153
Re: zoom immagine
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
}
});
})
<div class=“galleryart”>
<li> <a class=“popup” href=”{url}”><img src=”{thumburl}” /></a>
</li>
</div>
però non ho ottenuto il popup. perchè?
Offline
Re: zoom immagine
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
)
TXP Builders – finely-crafted code, design and txp
Offline
#10 2015-03-17 18:54:40
- pierlu
- Member
- Registered: 2014-08-12
- Posts: 153
Re: zoom immagine
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:
Offline
Re: zoom immagine
se non funziona e perché le js/files non sono nell path come dici jakob
…. texted postive
Offline
#12 2015-03-22 20:08:26
- pierlu
- Member
- Registered: 2014-08-12
- Posts: 153
Re: zoom immagine
Con il linguaggio css posso dare delle dimensioni allo zoom ?é
Offline