Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
31/12/2014, 12:17:13
(Modification du message : 31/12/2014, 19:00:44 par lolox.)
Bonjour,
Je souhaiterais connaitre le code smarty pour pouvoir lui indiquer que les images du slider (bootstrap3) sont lié avec le module Gallery.
Code : [== HTML ==]
<div class="item active">
<img class="center" src="http://lorempixel.com/950/360/animals/1/" alt="...">
<div class="carousel-caption">
</div>
</div>
au lieu d'avoir <img class="center" src="http://lorempixel.com/950/360/animals/1/" alt="..."> le remplacer le code qui pointe vers les images selectionnées avec le module Gallery.
Le but est que le redacteur puisse changer les images du slider lui meme sans rentrer dans le code html.
j'ai placer mon html du slider dans un nouveau gabarit Gallery mais apres...
Merci d'avance.
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
Bonjour et bienvenue,
Ce tuto devrait t'aider à comprendre le fonctionnement de Gallery.
Merci de respecter les règles du forum indiquées en haut de chaque pages sous ATTENTION.
Message aux admin : à déplacer dans Modules, tags.
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
Merci bien mais j'ai déjà regardé ton tuto qui est bien fait d'ailleurs.
Malheureusement je ne comprend pas le fonctionnement pour récupérer les images jointe dans le module Gallery.
c'est ce code que je dois modifier :
Code : [== Indéfini ==]
<div id='coin-slider'>
{foreach from=$images item=image}
<a href="#"><img class="img-candidat" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
{/foreach}
</div>
pour le css et le js tout est déjà ok pas besoin de les rentrer dans le nouveau gabarit Gallery.
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
Sans connaître le code du slider utilisé ni ton niveau de connaissances, c'est difficile de te répondre.
Peut-être :
Code : <div class="item active">
{foreach from=$images item=image}
<img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
<div class="carousel-caption">
</div>
{/foreach}
</div>
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
J'ai des bonnes connaissance en html et css mais en smarty je débarque complétement.
le code du slider js est celui de bootstrap 3.
Code : [== JavaScript ==]
// CAROUSEL CLASS DEFINITION
// =========================
var Carousel = function (element, options) {
this.$element = $(element)
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.paused =
this.sliding =
this.interval =
this.$active =
this.$items = null
this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element
.on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
}
Carousel.VERSION = '3.3.1'
Carousel.TRANSITION_DURATION = 600
Carousel.DEFAULTS = {
interval: 5000,
pause: 'hover',
wrap: true,
keyboard: true
}
Carousel.prototype.keydown = function (e) {
if (/input|textarea/i.test(e.target.tagName)) return
switch (e.which) {
case 37: this.prev(); break
case 39: this.next(); break
default: return
}
e.preventDefault()
}
Carousel.prototype.cycle = function (e) {
e || (this.paused = false)
this.interval && clearInterval(this.interval)
this.options.interval
&& !this.paused
&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
return this
}
Carousel.prototype.getItemIndex = function (item) {
this.$items = item.parent().children('.item')
return this.$items.index(item || this.$active)
}
Carousel.prototype.getItemForDirection = function (direction, active) {
var delta = direction == 'prev' ? -1 : 1
var activeIndex = this.getItemIndex(active)
var itemIndex = (activeIndex + delta) % this.$items.length
return this.$items.eq(itemIndex)
}
Carousel.prototype.to = function (pos) {
var that = this
var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))
if (pos > (this.$items.length - 1) || pos < 0) return
if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"
if (activeIndex == pos) return this.pause().cycle()
return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos))
}
Carousel.prototype.pause = function (e) {
e || (this.paused = true)
if (this.$element.find('.next, .prev').length && $.support.transition) {
this.$element.trigger($.support.transition.end)
this.cycle(true)
}
this.interval = clearInterval(this.interval)
return this
}
Carousel.prototype.next = function () {
if (this.sliding) return
return this.slide('next')
}
Carousel.prototype.prev = function () {
if (this.sliding) return
return this.slide('prev')
}
Carousel.prototype.slide = function (type, next) {
var $active = this.$element.find('.item.active')
var $next = next || this.getItemForDirection(type, $active)
var isCycling = this.interval
var direction = type == 'next' ? 'left' : 'right'
var fallback = type == 'next' ? 'first' : 'last'
var that = this
if (!$next.length) {
if (!this.options.wrap) return
$next = this.$element.find('.item')[fallback]()
}
if ($next.hasClass('active')) return (this.sliding = false)
var relatedTarget = $next[0]
var slideEvent = $.Event('slide.bs.carousel', {
relatedTarget: relatedTarget,
direction: direction
})
this.$element.trigger(slideEvent)
if (slideEvent.isDefaultPrevented()) return
this.sliding = true
isCycling && this.pause()
if (this.$indicators.length) {
this.$indicators.find('.active').removeClass('active')
var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])
$nextIndicator && $nextIndicator.addClass('active')
}
var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"
if ($.support.transition && this.$element.hasClass('slide')) {
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
$active
.one('bsTransitionEnd', function () {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function () {
that.$element.trigger(slidEvent)
}, 0)
})
.emulateTransitionEnd(Carousel.TRANSITION_DURATION)
} else {
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger(slidEvent)
}
isCycling && this.cycle()
return this
}
// CAROUSEL PLUGIN DEFINITION
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.carousel')
var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
var action = typeof option == 'string' ? option : options.slide
if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))
if (typeof option == 'number') data.to(option)
else if (action) data[action]()
else if (options.interval) data.pause().cycle()
})
}
var old = $.fn.carousel
$.fn.carousel = Plugin
$.fn.carousel.Constructor = Carousel
// CAROUSEL NO CONFLICT
// ====================
$.fn.carousel.noConflict = function () {
$.fn.carousel = old
return this
}
// CAROUSEL DATA-API
// =================
var clickHandler = function (e) {
var href
var $this = $(this)
var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7
if (!$target.hasClass('carousel')) return
var options = $.extend({}, $target.data(), $this.data())
var slideIndex = $this.attr('data-slide-to')
if (slideIndex) options.interval = false
Plugin.call($target, options)
if (slideIndex) {
$target.data('bs.carousel').to(slideIndex)
}
e.preventDefault()
}
$(document)
.on('click.bs.carousel.data-api', '[data-slide]', clickHandler)
.on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
var $carousel = $(this)
Plugin.call($carousel, $carousel.data())
})
})
}(jQuery);
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
C'est le code html du slider que nous avons besoin, pas du JS
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
désolé le voilà
Code : [== HTML ==]
<div class="container slider-lg hidden-xs">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="center" src="http://lorempixel.com/950/360/animals/1/" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img class="center" src="http://lorempixel.com/950/360/animals/2/" alt="...">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img class="center" src="http://lorempixel.com/950/360/animals/3/" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
Essaye ceci :
Code : {* Wrapper for slides *}
<div class="carousel-inner" role="listbox">
{foreach from=$images item=image}
<div class="item{if $image->active} active{/if}">
<img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
<div class="carousel-caption"><h3>{$image->comment}</h3>
</div>
</div>
{/foreach}
</div>
{* Controls *}
Il faut que tu apprennes les rudiments de smarty (c'est du php simplifé) : http://www.smarty.net/docs/en/index.tpl.
En particulier : http://www.smarty.net/docs/en/language.b...ctions.tpl
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
Merci bien, je vais voir ça d'ici 1h00 ou 2 je dois m'absenter pour le moment.
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
Alors y a du mieux
il prend bien les images envoyer via l'admin dans Gallery mais j'ai la class"active" sur toutes les images, alors que je devrais l'avoir uniquement sur l'image affichée dans le slide.
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
Normalement avec <div class="item{if $image->active} active{/if}"> il ne devrait mettre active que si l'image affichée est l'active.
As-tu un lien afin que je puisse avoir un peu plus d'infos ?
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
Peut-être un problème d'apostrophes.
Essaye ceci (moins propre, mais plus sûr) :
Code : <div class="carousel-inner" role="listbox">
{foreach from=$images item=image}
{if $image->active}
<div class="item active">
{else}
<div class="item">
{/if}
<img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
<div class="carousel-caption"><h3>{$image->comment}</h3>
</div>
</div>
{/foreach}
</div>
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
31/12/2014, 17:31:40
(Modification du message : 31/12/2014, 17:32:20 par lolox.)
non désolé je suis en local.
voilà ou j'ai copié l'appel du gabarit Gallery
Code : [== HTML ==]
<div class="container slider-lg hidden-xs">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="item active">
{Gallery}
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
et voilà ce que j'ai mis dans le gabarit Gallery
Code : [== Indéfini ==]
{* Wrapper for slides *}
<div class="carousel-inner" role="listbox">
{foreach from=$images item=image}
<div class="item{if $image->active} active{/if}">
<img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
<div class="carousel-caption"><h3>{$image->comment}</h3>
</div>
</div>
{/foreach}
</div>
{* Controls *}
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
31/12/2014, 17:37:55
(Modification du message : 31/12/2014, 17:39:29 par Jean le Chauve.)
Voici ton erreur :
<div class="item active">{Gallery}
A ta place, j'aurais copié l'entièreté du code dans le gabarit de Gallery.
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
31/12/2014, 17:45:18
(Modification du message : 31/12/2014, 17:50:02 par lolox.)
Oui effectivement grosse erreur de ma part, mais ça ne change rien ;( j'ai toujours les 3 images avec la class"active".
Y a peut être une configuration au niveau du module Gallery à faire ?
24h00 que je galère la dessus ;(
Je viens de copier tout le code slide dans le gabarit Gallery c'est plus clair effectivement.
Code : [== HTML ==]
<div class="container slider-lg hidden-xs">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
{* Wrapper for slides *}
<div class="carousel-inner" role="listbox">
{foreach from=$images item=image}
<div class="item{if $image->active} active{/if}">
<img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
<div class="carousel-caption">
<h3>{$image->comment}</h3>
</div>
</div>
{/foreach}
</div>
{* Controls *}
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
Dans ton gabarit de Gallery sous la source du gabarit, tu as ceci : Variable Smarty de gabarits disponibles : ?
Clique sur l'icône ? afin de connaître les différentes variables accessibles.
On va tester si $image->active est initialisé :
Code : [== Indéfini ==]
<div class="carousel-inner" role="listbox">
{foreach from=$images item=image}
{if $image->active}<h2>Image active</h2>
<div class="item active">
{else}<h2>Image inactive</h2>
<div class="item">
{/if}
<img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
<div class="carousel-caption"><h3>{$image->comment}</h3>
</div>
</div>
{/foreach}
</div>
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
Désolé mais je colle ou ce bout de code ?
Merci de ton aide t'es vraiment super.
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
Oups, c'est de ma faute : $image->active n'a rien avoir avec notre cas, il s'agir seulement de savoir si l'image a été désactivée dans le module.
A première vue, je ne vois pas comment résoudre le problème de savoir quelle image est affichée à un moment précis dans le foreach.
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
31/12/2014, 18:01:36
(Modification du message : 31/12/2014, 18:05:15 par lolox.)
A la limite la boucle je peux m'en passer largement, mais avoir juste l'adresse des img activé dans le module Gallery.
Après c 'est au js de gérer la suite.
Vois-tu ?
Le rédacteur ne pourra pas ajouter plus de 4 images par exemple en fonction du nombres d img inclus dans le gabarit Gallery.
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
J'ai l'impression qu'il n'y a que le premier élément du tableau qui est considéré comme "active".
Tu vas essayer ceci :
Code : [== Indéfini ==]
{* Wrapper for slides *}
<div class="carousel-inner" role="listbox">
{foreach from=$images item=image}
<div class="item{if $image@first} active{/if}">
<img class="center" src="{$image->file|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" />
<div class="carousel-caption"><h3>{$image->comment}</h3>
</div>
</div>
{/foreach}
</div>
{* Controls *}
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
T'es génial mec
Ca fonctionne !!!
J'adorerai des explications pas à pas sur le fonctionnement de ta boucle.
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
Très simple, regarde ici : http://www.smarty.net/docs/en/language.f...oreach.tpl
N'hésite pas à poser des questions si tu ne piges pas.
Une fois que tout est nickel, n'oublie pas de modifier le titre de ton premier message pour ajouter [Résolu] en début de ligne
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
Dernier souci les images ne ce centre pas ;(
Mon niveau d'english est vraiment trop faible ;( tu n'aurais pas des liens FR la dessus ?
Messages : 8,242
Sujets : 58
Inscription : Dec 2007
Réputation :
0
Voici la doc en français (partielle) et seulement pour la version de 2 de smarty (nous sommes à la 3).
En ce qui concerne le problème de centrage, je ne peux pas te répondre sans avoir un lien.
Il s'agit certainement d'un problème de css. Vérifie si tu as bien créé la classe img.center
As-tu un lien vers la documentation de ce slider ?
Messages : 82
Sujets : 2
Inscription : Dec 2014
Réputation :
0
31/12/2014, 18:45:40
(Modification du message : 31/12/2014, 18:49:26 par lolox.)
Sur mon slide en statique je n'ai pas ce problème pourtant j'ai bien le même css sur les 2.
Etrange.
Le lien sur la doc du carousel //getbootstrap.com/javascript/#carousel
j ai l impression que c'est la taille des images ne sont prises à 100% de la taille de leur conteneur ou un truc de genre.
|