18100 sujets

Questions générales et questions de débutants

Highslide JS

Bonjour à tous,

Après m'être cassée les dents toute la soirée hier et sachant que le sujet est traité ici, je viens poser mes questions avant d'aller plus loin...
Je voudrais savoir s'il est possible d'afficher une galerie (de chez HighslideJS) "ouverte" directement (comme si la première image avait déjà été cliquée), et si c'est le cas, comment supprimer la fonction : "si tu cliques sur Entrée, la galerie se ferme", ainsi que la bordure dégradée et arrondie du popup ?

pour le moment j'ai caché la galerie grâce à un conteneur qui dans le css est en visibility:hidden :

<div class="hidden-container">
	<ul>
		<li>
			<a id="autoload" href="images/highslide/realisations/big/img1.png" class="highslide"
					onclick="return hs.expand(this, config1 )">
				<img src="images/highslide/realisations/minia/img1.png"  alt=""
					title="Heading from the thumbnail's title attribute" />
			</a>
			<span class="highslide-caption">Caption from a subsequent div1</span>
		</li>
		<li>
			<a href="images/highslide/realisations/big/img2.png" class="highslide" 
					onclick="return hs.expand(this, config1 )">
				<img src="images/highslide/realisations/minia/img2.png"  alt=""
					title="Heading from the thumbnail's title attribute" />
			</a>
			<span class="highslide-caption">Caption from a subsequent div2</span>
		</li>
	</ul>
</div>

le .js me permet d'afficher directement la première image grâce au autoload. ça donne ça :

<script  type="text/javascript">
<!-- HIGHSLIDE GALERIE -->		
	//Global
	hs.graphicsDir = 'highslide/graphics/';
	hs.showCredits = false;
	hs.outlineType = 'custom';
	hs.expandDuration = 0;
	hs.outlineWhileAnimating = 1;
	hs.align = 'center';
	hs.padToMinWidth = true;
	hs.marginBottom = 105;
	hs.useBox = true;
	hs.width = 600;
	hs.height = 400;
	hs.allowMultipleInstances = false;
	hs.blockRightClick = true;
	hs.numberOfImagesToPreload = 0;
	hs.captionOverlay.position = 'above';
	hs.headingEval = 'this.thumb.title';

	// Add the slideshow controller
	hs.addSlideshow({
		slideshowGroup: 'group1',
		interval: 1000,
		repeat: true,
		useControls: true,
		fixedControls: 'fit',
		overlayOptions: {
			opacity: 0.65,
			position: 'bottom center',
			offsetX: 0,
			offsetY: -10,
			hideOnMouseOut: true
		},
		thumbstrip: {
			mode: 'horizontal',
			position: 'below',
			relativeTo: 'image'
		}

	});
	
	// gallery config object
	var config1 = {
		slideshowGroup: 'group1',
		transitions: ['expand', 'crossfade']
	};
	
	// Open the first image on page load
	hs.addEventListener(window, "load", function() {
	
	// click the element virtually:
		document.getElementById("autoload").onclick();
	});
	
	// Prevent closing the image when clicking the dimmed background
	hs.onDimmerClick = function() {
		return false;
	}
	// Keep the position after window resize
	hs.addEventListener(window, 'resize', function() {
		var i, exp;
		hs.page = hs.getPageSize();
		for (i = 0; i < hs.expanders.length; i++) {
			exp = hs.expanders[i];
			if (exp) {
				var x = exp.x,
					y = exp.y;
				// get new thumb positions
				exp.tpos = hs.getPosition(exp.el);
				x.calcThumb();
				y.calcThumb();
				// calculate new popup position
				x.pos = x.tpos - x.cb + x.tb;
				x.scroll = hs.page.scrollLeft;
				x.clientSize = hs.page.width;
				y.pos = y.tpos - y.cb + y.tb;
				y.scroll = hs.page.scrollTop;
				y.clientSize = hs.page.height;
				exp.justify(x, true);
				exp.justify(y, true);
				// set new left and top to wrapper and outline
				exp.moveTo(x.pos, y.pos);
			}
		}
	});
	
	// Cancel the default action for image click and do next instead
	hs.Expander.prototype.onImageClick = function (sender) {
		return hs.next();
	}
	
	// French language strings
	hs.lang = {
		cssDirection: 'ltr',
		loadingText: 'Chargement...',
		loadingTitle: 'Cliquer pour annuler',
		focusTitle: 'Cliquer pour amener au premier plan',
		fullExpandTitle: 'Afficher à la taille réelle',
		creditsText: 'Propulsé par <i>Highslide JS</i>',
		creditsTitle: 'Site Web de Highslide JS',
		previousText: 'Précédente',
		nextText: 'Suivante',
		moveText: 'Déplacer',
		closeText: 'Fermer',
		closeTitle: 'Fermer (Esc ou Échappement)',
		resizeTitle: 'Redimensionner',
		playText: 'Lancer',
		playTitle: 'Lancer le diaporama (barre d\'espace)',
		pauseText: 'Pause',
		pauseTitle: 'Suspendre le diaporama (barre d\'espace)',
		previousTitle: 'Précédente (flèche gauche)',
		nextTitle: 'Suivante (flèche droite)',
		moveTitle: 'Déplacer',
		fullExpandText: 'Taille réelle',
		number: 'Image %1 sur %2',
		restoreTitle: 'Utiliser les touches flèches droite et gauche pour suivant et précédent.'
	};
</script>


bref, le résultat n'est pas probant, et la position:absolute m'enquiquine pas mal mais je ne parviens pas à le gérer autrement, ni encore à virer cette Smiley biggol de bordure ou l'Entrée qui ferme tout...

si vous aviez une/des pistes, je suis preneuse...
Merci d'avance à ceux qui prendront le temps[/i]
Modifié par ClR (22 May 2013 - 06:42)
Smiley smile pour mon soucis de fermeture du popup (au clic sur Entrée): en ajoutant dans le fichier JavaScript le code suivant, le problème de fermeture automatique est résolu :


// Suppr close action
hs.onKeyDown = function(sender, e) 
{
	if(e.keyCode == 8 || e.keyCode == 13 || e.keyCode == 27 || e.keyCode == 33 || e.keyCode == 34 || e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 70) return false;
}


On trouve les codes ici... http://highslide.com/ref/hs.onKeyDown

Smiley smile J'ai trouvé la façon de modifier les bordures directement dans l'éditeur de Highslide :
L'adresse de l'éditeur : http://highslide.com/editor/
Et puis aller dans l'onglet : style > popup styles > border and outline > ...
Décocher l'option graphic outline et mettre le background de la même couleur que le fond du site. J'aurais voulu le mettre en transparent mais n'y suis pas parvenue encore... Smiley fache

Smiley decu Toujours pas moyen de placer comme un div le popup: je n'arrive pas à l'intégrer correctement dans mon site... En fait j'aimerais qu'il soit au milieu des autres div, comme s'il était en position:relative. Mais nan, ça reste un popup, bien au-dessus de tout le reste du site. Je ne sais pas si vous voyez ce que je veux dire...

Merci de votre aide si vous comprenez quelque chose Smiley ohwell
Salut,

ClR a écrit :
Je voudrais savoir s'il est possible d'afficher une galerie (de chez HighslideJS) &quot;ouverte&quot; directement (comme si la première image avait déjà été cliquée), et si c'est le cas, comment supprimer la fonction : &quot;si tu cliques sur Entrée, la galerie se ferme&quot;,
Une piste avec jquery.Il te suffit de simuler un clic sur ton image avec par exemple http://api.jquery.com/trigger/
Bonjour benj et merci de ta réponse.

Par rapport au 1er sujet, j'ai trouvé quelques réponses, dont celle concernant l'ouverture automatique, que je ne réalise pas en jquery mais en js grâce à l'autoload. Post du 22/05:
a écrit :
le .js me permet d'afficher directement la première image grâce au autoload. (... + code qui suit)

Par contre le problème qui subsiste est de placer ce popup ouvert comme un div en position:relative, c'est à dire n'importe où dans ma page, mais toujours à la même place, et quelle que soit la position de la barre de défilement du navigateur. Le bloquer en quelque sorte (100px en dessous de mon logo par exemple, et toujours là).

J'ai fouillé, j'ai cherché mais je n'arrive pas à mes fins.

Chez Highslide, il y a à priori moyen de faire ce que je voudrais en se servant des TargetX et TargetY. Et comble du bonheur ça marche, si on n'utilise pas la galerie. C'est à dire que ça marche seulement au chargement de la page. Dès qu'on change d'image, ça revient à la position automatique du highslide de base (sans ma galleryOptions).

Voici mon code tel qu'il est aujourd'hui:


<head>
    <!--HIGHSLIDE - GALERIE D'IMAGES -->
    <script type="text/javascript" src="<?php echo "http://".CHEMIN_HIGHSLIDE."highslide-full.js"; ?>"></script>
    <script type="text/javascript" src="<?php echo "http://".CHEMIN_HIGHSLIDE."highslide.config.js"; ?>" charset="utf-8"></script>       
    <link rel="stylesheet" type="text/css" href="<?php echo "http://".CHEMIN_HIGHSLIDE."highslide.css"; ?>" />
        <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="<?php echo "http://".CHEMIN_HIGHSLIDE."highslide-ie6.css"; ?>" />
        <![endif]-->
    <script type="text/javascript">          
    <!--HIGHSLIDE GALERIE-->
        //GLOBAL
            hs.graphicsDir = 'highslide/graphics/';
            hs.align = 'center';           
            hs.showCredits = true;
            hs.outlineType = null;
            hs.expandDuration = 0;//ms
            hs.outlineWhileAnimating = 1;
            hs.padToMinWidth = true;
            hs.width = 700;
            hs.height = 480;
            hs.allowMultipleInstances = false;
            hs.blockRightClick = true;
            hs.captionOverlay.position = 'above';
            hs.headingEval = 'this.thumb.title';
            hs.targetX = null; //null dc suit le flux
            hs.targetY ='target 5px'; // div="target", 5px à droite
        //FRENCH language strings
        hs.lang = {
            cssDirection: 'ltr',
            loadingText: 'Chargement...',
            loadingTitle: 'Cliquer pour annuler',
            creditsText: 'Propulsé par <i>Highslide JS</i>',
            creditsTitle: 'Site Web de Highslide JS',
            previousText: 'Précédente',
            nextText: 'Suivante',
            moveText: 'Déplacer',
            playText: 'Lancer',
            playTitle: 'Lancer le diaporama (barre d\'espace)',
            pauseText: 'Pause',
            pauseTitle: 'Suspendre le diaporama (barre d\'espace)',
            previousTitle: 'Précédente (flèche gauche)',
            nextTitle: 'Suivante (flèche droite)',
            restoreTitle: 'Utiliser les touches flèches droite et gauche pour suivant et précédent.'
        }; 
    //AUTOLOAD     
        // Open the first image on page load
        hs.addEventListener(window, "load", function() {       
            // click the element virtually:
                document.getElementById("autoload").onclick();
        });    
        // Prevent closing the image when clicking the dimmed background
        hs.onDimmerClick = function() {
            return false;
        }
        // Keep the position after window resize
        hs.addEventListener(window, 'resize', function() {
            var i, exp;
            hs.page = hs.getPageSize();
            for (i = 0; i < hs.expanders.length; i++) {
                exp = hs.expanders[i];
                if (exp) {
                    var x = exp.x,
                        y = exp.y;
                    // get new thumb positions
                    exp.tpos = hs.getPosition(exp.el);
                    x.calcThumb();
                    y.calcThumb();
                    // calculate new popup position
                    x.pos = x.tpos - x.cb + x.tb;
                    x.scroll = hs.page.scrollLeft;
                    x.clientSize = hs.page.width;
                    y.pos = y.tpos - y.cb + y.tb;
                    y.scroll = hs.page.scrollTop;
                    y.clientSize = hs.page.height;
                    exp.justify(x, true);
                    exp.justify(y, true);
                    // set new left and top to wrapper and outline
                    exp.moveTo(x.pos, y.pos);
                }
            }
        });    
        // Cancel the default action for image click and do next instead
        hs.Expander.prototype.onImageClick = function (sender) {
            return hs.next();
        }
            var galleryOptions = {
                slideshowGroup: 'group1',
                transitions: ['expand', 'crossfade']
            }; 
            // Add the slideshow providing the controlbar and the thumbstrip
            hs.addSlideshow({
                slideshowGroup: 'group1',
                interval: 3000,
                repeat: true,
                useControls: true,
                fixedControls: 'fit',
                overlayOptions: {
                    opacity: 0.85,
                    position: 'bottom center',
                    relativeTo: 'image',
                    offsetX: 0,
                    offsetY: 5,
                    hideOnMouseOut: true
                },
                thumbstrip: {
                    mode: 'horizontal',
                    position: 'below',
                    relativeTo: 'image'
                }
            });
            //place pr la galerie d'image en dessous
            hs.Expander.prototype.onInit = function() {
               hs.marginBottom = (this.slideshowGroup == 'group1') ? 105 : 15;
            };
    </script>
    <title>Titre</title>
</head>
<body>
    <div id="container">
        <div id="content">
            <div id="en_tete">
                En-tete
            </div>
            <div id="contenu">
                <div id="target">
                    //repère pour la place de la gallerie highslide dans la page (cible)
                </div>
                <div class="highslide-gallery">
                <?php
                    //array des images à montrer (que je récupère ailleurs)
                    $array=array(
                        array('nom'=>'image 1','lien'=>'img_1','txt'=>'Texte sup image 1'),
                        array('nom'=>'image 2','lien'=>'img_2','txt'=>'Texte sup image 2'),
                        array('nom'=>'image 3','lien'=>'img_3','txt'=>'Texte sup image 3')
                    );
                    //...
                    if(isset($array))
                    {
                        $nb=sizeof($array);
                         
                        //compteur
                        $i=1;
                        //HIDDING THUMBNAILS
                        echo '<div id="highslide-html" class="hidden-container">';
                            //parcours array des images
                            foreach($array as $arr)
                            {
                                echo '<a href="'.IGES.'big/'.$arr['lien'].'.png"
                                         id="'.(($i===1) ? 'autoload' : '').'"
                                         class="highslide"
                                         onclick="return hs.expand(this, galleryOptions);">
                                        <img src="'.IGES.'minia/'.$arr['lien'].'.png" alt=""
                                                title="'.mettre_1ere_en_maj($arr['nom']).'"/>
                                    </a>
                                      <span class="highslide-caption">
                                        '.$arr['txt'].'
                                      </span>';
                                $i++;
                            }
                        echo '</div>';
                    }
                ?>
                </div>
            <!--ferm contenu-->
            </div>
        <!--ferm content-->
        </div>
        <div id="footer">
            <div id="footer_container">
                Pied de page
            </div>
        <!--ferm footer-->
        </div>
    <!--ferm container-->
    </div>   
</body>


J'ai beaucoup cherché sur le net. J'ai trouvé des choses mais tout est en anglais et, même si je ne le comprends pas trop mal, y a bcp de choses qui m'échappent.

J'ai vu par exemple également une fonction à intégrer pour que les target fonctionnent mais je ne sais vraiment pas où.

	
onclick="return hs.htmlExpand(this, {contentId : 'highslide-html', targetX: null, targetY: 'target 0px', height: 700, width: 480 })"


Quelqu'un peut-il m'orienter ?

Merci d'avance, Claire[/i]
Sujet clos
Aller à