Intégration d'un slider sans plugin : possible ou impossible ?

Bonjour

Je suis un petit nouveau dans le monde de pluxml et pour un projet pro, je souhaite intégrer un slider, mais ma question est simple peut-on intégrer un script jquery dans une page php comme dans une page html.

C'est à dire transformer ceci pour le placer dans le header de pluxml

Version html :
[== HTML ==]
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.dropotron-1.0.js"></script>
<script type="text/javascript" src="jquery.slidertron-1.1.js"></script>
<script type="text/javascript">
	$(function() {
		$('#menu > ul').dropotron({
			mode: 'fade',
			globalOffsetY: 11,
			offsetY: -15
		});
		$('#slider').slidertron({
			viewerSelector: '.viewer',
			indicatorSelector: '.indicator span',
			reelSelector: '.reel',
			slidesSelector: '.slide',
			speed: 'slow',
			advanceDelay: 4000
		});
	});
</script>
</head>

Voila j'ai tenté de placer dans le header comme ceci :
[== PHP ==]
<?php if (!defined('PLX_ROOT')) exit; ?>
<!DOCTYPE html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title><?php $plxShow->pageTitle(); ?></title>
<?php $plxShow->meta('description') ?>
<?php $plxShow->meta('keywords') ?>
<?php $plxShow->meta('author') ?>
<?php $plxShow->templateCss() ?>
<link rel="icon" href="<?php $plxShow->template(); ?>/img/favicon.png" />
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/style.css" media="screen"/>
<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('ARTICLES_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss') ?> " />
<link rel="alternate" type="application/rss+xml" title="<?php $plxShow->lang('COMMENTS_RSS_FEEDS') ?>" href="<?php $plxShow->urlRewrite('feed.php?rss/commentaires') ?> " />

<script src="<?php $plxShow->template(); ?>/js/jquery.slidertron-1.1.js"></script>
<script src="<?php $plxShow->template(); ?>/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#menu > ul').dropotron({
			mode: 'fade',
			globalOffsetY: 11,
			offsetY: -15
		});
		$('#slider').slidertron({
			viewerSelector: '.viewer',
			indicatorSelector: '.indicator span',
			reelSelector: '.reel',
			slidesSelector: '.slide',
			speed: 'slow',
			advanceDelay: 4000
		});
	});
</script>

<!--[if lt IE 9]>
<script src="<?php $plxShow->template(); ?>/js/html5ie.js"></script>
<script src="<?php $plxShow->template(); ?>/js/respond.min.js"></script>
<![endif]-->
</head>

En pensant bien à mettre les fichiers /jquery.slidertron-1.1.js et /jquery-1.7.1.min.js dans le dossier /js du template par défaut et en intégrant bien le code css du slider dans style.css

Mais voila çà ne fonctionne pas, je cherche mon erreur mais ne trouvant pas je cherche un peu d'aide.

Réponses

  • StéphaneStéphane Member, Former PluXml Project Manager
    Bonjour
    Est-ce que ton slider est dans une div avec un id qui s'appelle slider
    <div id="slider">
    ...
    </div>
    

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • C'est le cas voici le code :
    [== Indéfini ==]
    <div id="slider">
    		<div class="viewer">
    			<div class="reel">
    				<div class="slide">
    					<img src="http://localhost/pluxml/themes/defaut/img/slide01.jpg" alt="" />
    				</div>
    				<div class="slide">
    					<img src="http://localhost/pluxml/themes/defaut/img/slide02.jpg" alt="" />
    				</div>
    				<div class="slide">
    					<img src="ihttp://localhost/pluxml/themes/defaut/img/slide03.jpg" alt="" />
    				</div>
    				<div class="slide">
    					<img src="http://localhost/pluxml/themes/defaut/img/slide04.jpg" alt="" />
    				</div>
    				<div class="slide">
    					<img src="img/slide05.jpg" alt="" />
    				</div>
    			</div>
    		</div>
    		<div class="indicator">
    			<span>1</span>
    			<span>2</span>
    			<span>3</span>
    			<span>4</span>
    			<span>5</span>
    		</div>
    	</div></section>
    
  • Mais donc ce serait possible en théorie d'intégrer ce genre de script sans passer par un plug-in ?
  • StéphaneStéphane Member, Former PluXml Project Manager
    oui absolument.

    Consultant PluXml

    Ancien responsable et développeur de PluXml (2010 à 2018)

  • Il faut l'intégrer directement dans les fichiers de ton thème.
  • Attention, aussi aux différentes version de jquery ! !
    J'ai eu ce problème avec jquery et PluXml.

    Selon tes options dans PluXml, il se peut qu'une autre librairie jquery soit aussi déclaré dans ta page après celle que tu déclares et donc "la rempace" !

    Bon courage,
    L@u
  • Merci à tous pour vos réponses. J'ai opté pour le slider officiel pour le moment :D
Connectez-vous ou Inscrivez-vous pour répondre.