Image qui s'ouvre

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image qui s'ouvre

Message par Horatio Jeu 14 Juil 2011 - 19:28

Bonsoir,

J'aimerais mettre une image sur le coté droit de mon forum, qui au clic s'ouvrirait pour laisser place à un texte ou à une image. Un peu comme une chatbox latérale mais en version image.

Merci d'avance pour votre aide.
Cordialement


Dernière édition par Horatio le Jeu 21 Juil 2011 - 22:59, édité 1 fois
Horatio

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'ouvre

Message par Alex Fowl Ven 15 Juil 2011 - 1:10

Bonsoir,

Ce code javascript :
Code:
jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 50px; right: 0px;background-color: #ffffff;z-index:1000;"><tr><td><img src="http://2img.net/i/fa/admin/icones/help.png" id="image" scrolling="no" style="width: 100%; height: 100%; display: none;" marginwidth="0" marginheight="0" frameborder="0"></img></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" onClick="document.getElementById(\'image\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>'); } );
Smile

Cordialement,
avatar

Alex Fowl
Membre actif

Masculin
Messages : 7557
Inscrit(e) le : 28/03/2009

Alex Fowl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'ouvre

Message par Horatio Ven 15 Juil 2011 - 8:17

Bonjour,

Merci pour votre aide, je vais tester ce code et je vous tiens au courant.

Cordialement
Horatio

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'ouvre

Message par Horatio Lun 18 Juil 2011 - 17:06

Bonjour,

J'ai utilisé votre code que j'ai modifié en insérant mon bouton ouvrir et mon bouton fermé, néanmoins sa ne marche pas.
Voici le code :
Code:
jQuery(document).ready(function() { jQuery('body').append('<table style="position: fixed; bottom: 450px; right: 40px;background-color: #ffffff;z-index:1000;"><tr><td><img src="http://2img.net/i/fa/admin/icones/help.png" id="image" scrolling="no" style="width: 100%; height: 100%; display: none;" marginwidth="0" marginheight="0" frameborder="0"></img></td><td style="vertical-align: bottom;"><img src="http://www.picdo.net/fichiers/2011/7/18/41126138-ad17-4818-a4b3-295ce6b1cf49_Sans-titre-5.png" onClick="document.getElementById(\'http://www.picdo.net/fichiers/2011/7/18/eaf2533b-fce0-4d80-a727-00fde5c73b80_P.png\').style.display=(this.src==\'http://www.picdo.net/fichiers/2011/7/18/41126138-ad17-4818-a4b3-295ce6b1cf49_Sans-titre-5.png\')?\'block\':\'none\';this.src=(this.src==\'http://www.picdo.net/fichiers/2011/7/18/41126138-ad17-4818-a4b3-295ce6b1cf49_Sans-titre-5.png\')?\'http://www.picdo.net/fichiers/2011/7/18/2219a499-a5bf-4b38-aa6a-b99fb8a00357_239001.jpg\':\'http://www.picdo.net/fichiers/2011/7/18/41126138-ad17-4818-a4b3-295ce6b1cf49_Sans-titre-5.png\';"/></td></tr></table>'); } );

Et voici ce que j'ai mis dans Overall_footer :
Code:
<script type=text/javascript src=http://www.poudlardunivers.org/12854.js></script>

Néanmoins l'image ne souvre pas.
Est ce que j'ai fais une erreur ?

Cordialement
Merci pour votre aide.
Horatio

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'ouvre

Message par Horatio Mar 19 Juil 2011 - 16:07

Un petit up.

Cordialement
Horatio

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'ouvre

Message par Adam_sfp Mar 19 Juil 2011 - 20:18

Bonjour

Un effet comme celui ci peut il convenir?
Slide Panel

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'ouvre

Message par Horatio Mar 19 Juil 2011 - 20:57

Bonsoir,

Sa serait parfait s'il vous plait.
Merci pour votre aide.

Cordialement
Horatio

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Image qui s'ouvre

Message par Adam_sfp Mar 19 Juil 2011 - 21:49

Bonjour

Vous pouvez essayer ceci

Allez dans modules -->Gestion des codes Javascript

- créer un nouveau javascript.
-mettez un titre par exemple:slide panel
-cochez sur toutes les pages et collez le code ci dessous et validez

Code:
/*
    tabSlideOUt v1.3
   
    By William Paoli: http://wpaoli.building58.com

    To use you must have an image ready to go as your tab
    Make sure to pass in at minimum the path to the image and its dimensions:
   
    example:
   
        $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',                        //class of the element that will be your tab -doesnt have to be an anchor
                pathToTabImage: 'images/contact_tab.gif',    //relative path to the image for the tab
                imageHeight: '133px',                        //height of tab image
                imageWidth: '44px',                          //width of tab image 
        });

    or you can leave out these options
    and set the image properties using css
   
*/


(function($){
    $.fn.tabSlideOut = function(callerSettings) {
        var settings = $.extend({
            tabHandle: '.handle',
            speed: 300,
            action: 'click',
            tabLocation: 'left',
            topPos: '200px',
            leftPos: '20px',
            fixedPosition: false,
            positioning: 'absolute',
            pathToTabImage: null,
            imageHeight: null,
            imageWidth: null,
            onLoadSlideOut: false                     
        }, callerSettings||{});

        settings.tabHandle = $(settings.tabHandle);
        var obj = this;
        if (settings.fixedPosition === true) {
            settings.positioning = 'fixed';
        } else {
            settings.positioning = 'absolute';
        }
       
        //ie6 doesn't do well with the fixed option
        if (document.all && !window.opera && !window.XMLHttpRequest) {
            settings.positioning = 'absolute';
        }
       

       
        //set initial tabHandle css
       
        if (settings.pathToTabImage != null) {
            settings.tabHandle.css({
            'background' : 'url('+settings.pathToTabImage+') no-repeat',
            'width' : settings.imageWidth,
            'height': settings.imageHeight
            });
        }
       
        settings.tabHandle.css({
            'display': 'block',
            'textIndent' : '-99999px',
            'outline' : 'none',
            'position' : 'absolute'
        });
       
        obj.css({
            'line-height' : '1',
            'position' : settings.positioning
        });

       
        var properties = {
                    containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
                    containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
                    tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
                    tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
                };

        //set calculated css
        if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
            obj.css({'left' : settings.leftPos});
            settings.tabHandle.css({'right' : 0});
        }
       
        if(settings.tabLocation === 'top') {
            obj.css({'top' : '-' + properties.containerHeight});
            settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
        }

        if(settings.tabLocation === 'bottom') {
            obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
            settings.tabHandle.css({'top' : '-' + properties.tabHeight});
           
        }
       
        if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
            obj.css({
                'height' : properties.containerHeight,
                'top' : settings.topPos
            });
           
            settings.tabHandle.css({'top' : 0});
        }
       
        if(settings.tabLocation === 'left') {
            obj.css({ 'left': '-' + properties.containerWidth});
            settings.tabHandle.css({'right' : '-' + properties.tabWidth});
        }

        if(settings.tabLocation === 'right') {
            obj.css({ 'right': '-' + properties.containerWidth});
            settings.tabHandle.css({'left' : '-' + properties.tabWidth});
           
            $('html').css('overflow-x', 'hidden');
        }

        //functions for animation events
       
        settings.tabHandle.click(function(event){
            event.preventDefault();
        });
       
        var slideIn = function() {
           
            if (settings.tabLocation === 'top') {
                obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'left') {
                obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'right') {
                obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
            } else if (settings.tabLocation === 'bottom') {
                obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
            }   
           
        };
       
        var slideOut = function() {
           
            if (settings.tabLocation == 'top') {
                obj.animate({top:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'left') {
                obj.animate({left:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'right') {
                obj.animate({right:'-3px'},  settings.speed).addClass('open');
            } else if (settings.tabLocation == 'bottom') {
                obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
            }
        };

        var clickScreenToClose = function() {
            obj.click(function(event){
                event.stopPropagation();
            });
           
            $(document).click(function(){
                slideIn();
            });
        };
       
        var clickAction = function(){
            settings.tabHandle.click(function(event){
                if (obj.hasClass('open')) {
                    slideIn();
                } else {
                    slideOut();
                }
            });
           
            clickScreenToClose();
        };
       
        var hoverAction = function(){
            obj.hover(
                function(){
                    slideOut();
                },
               
                function(){
                    slideIn();
                });
               
                settings.tabHandle.click(function(event){
                    if (obj.hasClass('open')) {
                        slideIn();
                    }
                });
                clickScreenToClose();
               
        };
       
        var slideOutOnLoad = function(){
            slideIn();
            setTimeout(slideOut, 500);
        };
       
        //choose which type of action to bind
        if (settings.action === 'click') {
            clickAction();
        }
       
        if (settings.action === 'hover') {
            hoverAction();
        }
       
        if (settings.onLoadSlideOut) {
            slideOutOnLoad();
        };
       
    };
})(jQuery);

Ensuite on fait un deuxième script que vous pouvez modifier pour l'effet souhaité.

on répète donc l'opération

Allez dans modules -->Gestion des codes Javascript

- créer un nouveau javascript.
-mettez un titre par exemple:slide réglages
-cochez sur toutes les pages et collez le code ci dessous et validez


Code:
$(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                    //class of the element that will become your tab
            pathToTabImage: 'http://i49.servimg.com/u/f49/12/69/24/33/vid10.png', //path to the image for the tab //Optionally can be set using css
            imageHeight: '122px',                    //height of tab image          //Optionally can be set using css
            imageWidth: '40px',                      //width of tab image            //Optionally can be set using css
            tabLocation: 'right',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 6000,                              //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '200px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

*Dans ce code vous pouvez modifier la vitesse,la position de l'image droite ,gauche,haut ou bas etc..

la partie CSS

Affichage-->images et couleurs-->couleurs-->feuilles de styles CSS
et collez ce code et validez

Code:
.slide-out-div {
          padding: 20px;
          width: 500px;
          background: #ccc;
          border: 1px solid #29216d;
      } 

et pour finir placer ce code en page d'accueil ou widget ou templates..
Code:
<div class="slide-out-div">
          <a class="handle" href="http://link-for-non-js-users.html">Content</a>
 
      <img src="http://www.picdo.net/fichiers/2011/7/18/eaf2533b-fce0-4d80-a727-00fde5c73b80_P.png">     
</div> 

Cordialement.
Adam_sfp

Adam_sfp
Membre actif

Masculin
Messages : 4465
Inscrit(e) le : 18/04/2008

http://antonyadam.kanak.fr
Adam_sfp a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui s'ouvre

Message par Horatio Jeu 21 Juil 2011 - 22:58

C'est bon j'ai parfaitement réussi.
Merci pour votre aide.

Bonne soirée,
Bien Cordialement
Horatio
Horatio

Horatio
*****

Masculin
Messages : 630
Inscrit(e) le : 05/05/2010

http://poudlardunivers.com
Horatio a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum