zoom image limité au cadre

stephcache
Javascript

Bonjour, j'aurais besoin de vos lumière.

Sur ma page j'ai mis un cadre pour faire affiché une photo et sur cette photo je peux zoom avec un ascenseur, jusque là pas de problème. Par conte je voudrais pouvoir déplacé ma photo dans le cadre une fois le zoom fait sait pour sa que j'utilise le widget draggable de jquery UI ce qui fonctionne bien. Par conte je voudrais que la photo une fois zoom soit cloqué sur les bords du cadre.

Je cherche depuis un moment et je trouve pas

Si vous aviez une idée sa serait bien

Merci

Pour voir ce dont je parle voilà l'adresse Tatouage puis photo des réalisations (Utiliser Firefox pour l'instant)

6 réponses

tekyo11

Il faut que tu limite le déplacement proportionnellement à ton zoom. C'est une règle de calcule que je ferai.

stephcache
Auteur

Comment faire une proportionnelle alors que je peux cliqué n'importe ou sur la photo pour la déplacé

tekyo11

En JQuery tu peux connaitre les diffétrentes positions de l'image avec la propriété CSS .css('left') .css('top'), .css('right') et .css('bottom').

stephcache
Auteur

Oui je sais bien et j'ai voulu me servir tu top justement pour détecté quand image est supérieur ou égale à 0 en bloquant le axes x ou y mais le problème sait qu'une fois bloqué impossible de bougé l'image

tekyo11

Si tu peux montrer ton code pour mieux comprende ton script, ça serai super.

stephcache
Auteur

Le plus simple sait d'allé voir le site http://phassinf.synology.me/tatouage

Le fichier app.js

$(function()
{
    outdatedBrowser
    (
        {
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'transform',
            languagePath: 'outdatedbrowser/lang/fr.html'
        }
    );

    $('ul').hide();

    if (!('open' in document.createElement('details')))
    {
        $('#liste').on
        (
            'click',
            'summary',
            function(event)
            {
                event.preventDefault();
                //console.log(event);
                var ouvert = $(this).parent().attr('class');
                if(ouvert == "details open")
                {
                    $(this).parent().removeAttr('class');
                    $(this).parent().addClass('details');
                    $(this).parent().children('ul').hide('slow');
                }
                else
                {
                    $(this).parent().addClass('details open');
                    $(this).parent().children('ul').show('slow');
                }
            }
        );
    }

    $('#liste').on
    (
        'click',
        'li',
        function(event)
        {
            event.preventDefault();
            //console.log(event);
            $('#liste_photo img').remove();
            $('#photo img').remove();
            $('#liste summary').css('color', '#fff');
            $('#liste li').css('color', '#fff');
            $(this).css('color', '#cc04c2');
            $(this).parent().parent().children().css('color', '#cc04c2');
            var dossier = $(this).parent().parent().children('summary').text();
            var sous_dossier = $(this).text();
            //console.log(dossier + ' - ' + sous_dossier);
            $.ajax
            (
                {
                    url: "chargement_photo.php",
                    type: "GET",
                    dataType: "json",
                    data: {dossier_choisi: dossier, sous_dossier_choisi: sous_dossier}
                }
            )
            .done
            (
                function(data)
                {
                    //console.log("success");
                    //console.log(data);
                    var liste_photo = data[0];
                    var dossier = data[1][0];
                    var sous_dossier = data[1][1];
                    for(var id in liste_photo)
                    {
                        //console.log(liste_photo[id]);
                        $("<img src=\"photo/" + dossier + "/" + sous_dossier + "/mini/" + liste_photo[id] + "\" alt=\"" + liste_photo[id] + "\" title=\"Cliquer pour afficher\">").appendTo('#liste_photo');
                    }
                }
            )
            .fail
            (
                function()
                {
                    //console.log("error");
                }
            )
            .always
            (
                function()
                {
                    //console.log("complete");
                }
            );
        }
    );

    function explode(delimiter, string, limit)
    {
        if (arguments.length < 2 || typeof delimiter === 'undefined' || typeof string === 'undefined') return null;
        if (delimiter === '' || delimiter === false || delimiter === null) return false;
        if (typeof delimiter === 'function' || typeof delimiter === 'object' || typeof string === 'function' || typeof string === 'object')
        {
            return {0: ''};
        }
        if (delimiter === true) delimiter = '1';
        delimiter += '';
        string += '';
        var s = string.split(delimiter);

        if (typeof limit === 'undefined') return s;

        if (limit === 0) limit = 1;

        if (limit > 0)
        {
            if (limit >= s.length) return s;
            return s.slice(0, limit - 1).concat([s.slice(limit - 1).join(delimiter)]);
        }

        if (-limit >= s.length) return [];
        s.splice(s.length + limit);
        return s;
    }

    var multiple;

    $('#liste_photo').on
    (
        'click',
        'img',
        function(event)
        {
            event.preventDefault();
            //console.log(event);
            $('#photo img').remove();
            var lien = $(this).attr('src');
            //console.log(lien);
            var decoupe = explode("/", lien);
            //console.log(decoupe);
            var arbo = decoupe[0] + "/" + decoupe[1] + "/" + decoupe[2] + "/" + decoupe[4];
            //console.log(arbo);
            $("<img src=\"" + arbo + "\">").appendTo('#photo');
            $("#zoom").css('display', 'block');
            $("#boule").css('transform', 'translate(0px, 0px)');
            multiple = 1;
            $('#message').css('display', 'block');
        }
    );

    $("#photo").on
    (
        'click',
        '.zoom_photo',
        function(event)
        {
            event.preventDefault();
            //console.log(event);
            var choix = $(this).parent().attr('id');
            //console.log(choix);
            var width_photo_actu = $(this).parent().parent().parent().children('img').width();
            var height_photo_actu = $(this).parent().parent().parent().children('img').height();
            //console.log(width_photo_actu + " - " + height_photo_actu);
            var width_cadre = $("#photo").width();
            var height_cadre = $("#photo").height();

            if (choix == "plus")
            {
                if(multiple < 10)
                {
                    //console.log("plus");
                    width_new = width_photo_actu + 62;
                    height_new = height_photo_actu + 73;
                    //console.log('width et height actu' + width_new + " - " + height_new);
                    $("#photo img").css
                    (
                        {
                            width: width_new + 'px',
                            height: height_new + 'px'
                        }
                    );
                    var trans = -10 * multiple;
                    $("#boule").css('transform', 'translate(0px, ' + trans + 'px)');
                    multiple++;
                }
                //console.log(multiple);
            }
            else if (choix == "moins")
            {
                if(multiple > 1)
                {
                    //console.log("moins");
                    width_new = width_photo_actu - 62;
                    height_new = height_photo_actu - 73;
                    //console.log('width et height actu' + width_new + " - " + height_new);
                    if(width_new > width_cadre && height_new > height_cadre)
                    {
                        $("#photo img").css
                        (
                            {
                                width: width_new + 'px',
                                height: height_new + 'px'
                            }
                        );
                    }
                    else
                    {
                        $("#photo img").css
                        (
                            {
                                width: width_cadre + 'px',
                                height: height_cadre + 'px'
                            }
                        );
                    }
                    var trans = -10 * (multiple - 2);
                    $("#boule").css('transform', 'translate(0px, ' + trans + 'px)');
                    multiple--;
                }
            };
            //console.log(multiple);
            if(multiple > 1)
            {
                $("#message").css('display', 'none');
                $('#photo img').draggable('enable');
            }
            else
            {
                $("#message").css('display', 'block');
                $('#photo img').draggable('disable');
            }

            if(multiple == 1)
            {
                $("#photo img").css
                (   
                    {
                        top: 0,
                        left: 0
                    }
                );
            }
        }
    );

    $('#photo').on
    (
        'dragcreate',
        'img',
        function(event)
        {
            //$("#photo img").css('cursor', 'move');
            $('#photo img').draggable('disable');
            $('#photo img').draggable({cursor: 'pointer'});
        }
    );

    $('#photo').on
    (
        'drag',
        'img',
        function(event)
        {
            //var top = $('#photo img').
            //console.log(event);
            var image = $('#photo img').offset();
            var cadre = $('#photo').offset();
            console.log('----------------------------------------------');
            console.log('Cadre -> Top : ' + cadre.top + ' - Left : ' + cadre.left);
            console.log('Image -> Top : ' + image.top + ' - Left : ' + image.left);
            console.log('----------------------------------------------');
            var diff_top = image.top - cadre.top;
            var diff_left = image.left - cadre.left;
            console.log('Diff -> Top : ' + diff_top + ' - Left : ' + diff_left);
            if(diff_top > 10)
            {
                $('#photo img').offset({ top: cadre.top });
                console.log('Mettre top à 0');
                $('#photo img').draggable({axis: "x"});
            }
            else
            {
                console.log('sa fait chier');
                $('#photo img').draggable();
            }
        }
    );

    $('#photo').on
    (
        'dragstop',
        'img',
        function(event)
        {

        }
    );
});

Le fichier styte.css

*, html, body {margin: 0; padding: 0; font-family: comic sans ms; font-size: 16px; box-sizing: border-box;}
html, body {width: 100%; height: 100%; background-color: #333;}
a:link, a:visited, a:active, a:hover {text-decoration: none; color: #fff;}

header {width: 100%; height: 140px; background-color: #000; text-align: center;}
header div {display: inline-block;}
header div img {width: 100%; height: 100%;}
header div:nth-child(1) {height: 140px; width: 140px; float: left;}
header div:nth-child(2) {height: 140px;}
header div:nth-child(3) {height: 140px; width: 140px; float: right; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); transform: totate(90deg);}

nav {width: 100%; height: 40px; background-color: black; border-top: 1px solid #cc04c2; border-bottom: 1px solid #cc04c2;}
nav div {display: inline-block; height: 40px; line-height: 40px; vertical-align: middle; padding: 0px 5px; margin-right: -5px;}
nav div:hover {background-color: #cc04c2;}

#liste {width: 160px; background-color: black; overflow: hidden; overflow-y: scroll; padding: 5px; border: 1px solid #cc04c2; margin: 10px; position: absolute; top: 180px; left: 0; bottom: 0;}
#liste details {display: block;}
#liste details summary {cursor: pointer;}

#liste summary, #liste ul li {font-size: 14px; cursor: pointer; color: #fff;}

#liste details, #nav #liste details > summary {display:block;}
#liste details > summary:before {content:"►"; margin-right:5px;}
#liste details.open > summary:before {content:"▼"; color: #cc04c2;}

#liste ul {margin-left: 30px; list-style-type: none;}
#liste ul li:hover, #liste summary:hover {color: #cc04c2;}

#negatif {width: 269px; background-color: #fff; position: absolute; top: 180px; left: 180px; bottom: 0; margin: 10px 10px 10px 0px; background-color: black; border: 1px solid #cc04c2;}
#negatif #bord_gauche {width: 25px; height: 100%; background-image: url(../administration/png/pellicule.png); display: inline-block; margin-bottom: -5px; background-position: -6px 0px;}
#negatif #liste_photo {width: 217px; height: 100%; display: inline-block; margin-left: -5px; margin-bottom: -5px; overflow: hidden; overflow-y: scroll; text-align: center;}
#negatif #bord_droit {width: 25px; height: 100%; background-image: url(../administration/png/pellicule.png); display: inline-block; margin-bottom: -5px; float: right; background-position: -6px 0px;}
#negatif #liste_photo img {width: auto; height: 200px; cursor: pointer;}

#photo {position: absolute; top: 180px; bottom: 0; left: 450px; right: 0; border: 1px solid #cc04c2; margin: 10px; background-color: #000; overflow: hidden;}
#photo img {width: 100%; height: 100%;}
#photo #message {display: none;}
#photo #message {position: absolute; background-color: rgba(142, 142, 142, 0.7);z-index: 2; padding: 3px;}
#photo #deplacement {width: 120px; height: 120px; line-height: 120px; vertical-align: middle; text-align: center; position: absolute; right: 0; margin: 10px 10px 0px 0px; border-radius: 60px; border: 1px solid #333; background-color: #333; opacity: 0.8;}
#photo #deplacement .ligne {width: 120px; height: 40px; display: table-row;}
#photo #deplacement .espace2 {width: 5px; display: block;}
#photo #deplacement .espace1 {height: 5px; display: block;}
#photo #deplacement .colonne {width: 40px; height: 40px; display: table-cell;}

#photo #zoom {position: absolute; background-color: rgb(102, 102, 102); width: 35px; height: 160px; right: 0px; margin: 10px 10px 0px 0px; display: none; z-index: 10;}
#photo #zoom #plus, #photo #zoom #moins {height: 25px; width: 35px; padding: 5px 10px; -moz-user-select: none;}
#photo #zoom #plus .zoom_photo:hover , #photo #zoom #moins .zoom_photo:hover {background-color: #cc04c2;}
#photo #zoom #plus .zoom_photo, #photo #zoom #moins .zoom_photo {background-color: white; border-radius: 50%; text-align: center; width: 15px; height: 15px; line-height: 15px; vertical-align: middle; cursor: pointer;}
#photo #zoom #ascensseur {width: 35px; height: 110px; padding-top: 5px;}
#photo #zoom #ascensseur #barre_ext {width: 6px; height: 100px; background-color: #888; margin: auto; border-radius: 6px; padding-top: 2px;}
#photo #zoom #ascensseur #barre_ext #barre_int {width: 2px; height: 96px; background-color: black; margin: auto; order-radius: 2px;}
#photo #zoom #ascensseur #boule {width: 12px; height: 12px; border-radius: 12px; background-color: white; border: 1px solid #777; position: relative; margin: auto; top: -12px; cursor: pointer;}

Le fichier photo.php

<section id="liste">
    <?php
        $liste_dossier = recupe_contenu("photo");
        foreach ($liste_dossier as $dossier)
        {
            $dossier_modif = ucwords(str_replace("_", " ", $dossier));
            echo("<details class=\"details\">");
                echo("<summary>".$dossier_modif."</summary>");
                $liste_sous_dossier = recupe_contenu("photo/".$dossier);
                echo("<ul>");
                foreach ($liste_sous_dossier as $sous_dossier)
                {
                    echo("<li>".$sous_dossier."</li>");
                }
                echo("</ul>");
            echo("</details>");
        }
    ?>
</section>
<section id="negatif">
    <div id="bord_gauche"></div>
    <div id="liste_photo"></div>
    <div id="bord_droit"></div>
</section>
<section id="photo">
    <div id="message">Il faut zoomer pour pouvoir déplacer la photo</div>
    <div id="zoom">
        <div id="plus">
            <div class="zoom_photo">+</div>
        </div>
        <div id="ascensseur">
            <div id="barre_ext">
                <div id="barre_int"></div>
            </div>
            <div id="boule"></div>
        </div>
        <div id="moins">
            <div class="zoom_photo">-</div>
        </div>
    </div>
</section>