image Plein écran sur clic

<html> 
<head> 
<title> 
Image Full-Screen On Click. 
</title> 
</head> 
<body> 
<div>

Je veux faire image plein écran lorsque l'utilisateur clique sur elle, tout simple que cela, j'ai recherche sur le Web sans obtenir de réponse appropriée, comme Je ne suis pas expert pour faire ma propre fonction de script Java pour le faire, Alors, quelle est la meilleure façon de le faire. et Veuillez fournir un exemple s'il y a lieu.

Source

2013-08-31 Narendra Singh Rathore

En savoir Jquery (http://jquery.com/), HTML (http://www.w3schools.com/html/). Pour que vous puissiez essayer par vous-même –

Donnez le code html comme ci-dessous

<html> 
    <head> 
     <title>Image Full-Screen On Click.</title> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    </head> 
    <body> 
     <input id="clickbutton" type="button" value="Click" onclick="showimage()" /> 
    </body> 
</html>

écrire une fonction Javascript

<script type="text/javascript"> 
function showimage() 
{ 
    $("body").css("background-image","url('images/test.png')"); // Onclick of button the background image of body will be test here. Give the image path in url 
    $('#clickbutton').hide(); //This will hide the button specified in html 
} 
</script>

Source

2013-08-31 06:31:36

Courte question, réponse courte! Haha, génial! –

Hé ... Je ne suis pas sûr que ce soit ce que le gars voulait faire. Intelligent cependant. –

Sinon, vous pouvez sauter un <div> dans le DOM avec position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('image.jpg') no-repeat center; background-size: cover; et qui vous donne un moyen efficace en plein écran lightbox pour ton image

Source

2013-08-31 07:01:53 probablyup

Eh bien, ami, la première chose dont vous avez besoin est une image à cliquer sur votre page. Vous pouvez utiliser jQuery pour programmer n'importe quel élément DOM pour lequel vous pouvez imaginer un sélecteur CSS!

Si c'était moi, je fais quelque chose comme ce qui suit:

<html> 
    <head> 
     <title>My Full-Screen Image Clicker</title> 
     <script src = "Scripts/jquery-2.1.4.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
       //your code for stuff should go here 
       $('#Fullscreen').css('height', $(document).outerWidth() + 'px'); 
       //for when you click on an image 
       $('.myImg').click(function(){ 
        var src = $(this).attr('src'); //get the source attribute of the clicked image 
        $('#Fullscreen img').attr('src', src); //assign it to the tag for your fullscreen div 
        $('#Fullscreen').fadeIn(); 
       }); 
       $('#Fullscreen').click(function(){ 
        $(this).fadeOut(); //this will hide the fullscreen div if you click away from the image. 
       }); 
      }); 
     </script> 
     <style> 
      #MainImages { 
       width: 100%; 
       height: 800px; 
      } 
       #MainImages img { 
        cursor: pointer; 
        height: 70%; 
       } 
      #Fullscreen { 
       width: 100%; 
       display: none; 
       position:fixed; 
       top:0; 
       right:0; 
       bottom:0; 
       left:0; 
       /* I made a 50% opacity black tile background for this 
       div so it would seem more... modal-y*/ 
       background: transparent url('../Images/bgTile_black50.png') repeat; 
      } 
      #Fullscreen img { 
       display: block; 
       height: 100%; 
       margin: 0 auto; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="MainImages"> 
      <img src="Images/img.jpg" alt="" class="myImg" /> 
     </div> 
     <div id="Fullscreen"> 
      <img src="" alt="" /> 
     </div> 
    </body> 
</html>

Je mis en place un petit violon pour vous aussi: http://jsfiddle.net/wxj4c6yj/1/

Espérons que cela est d'une aide pour vous.

Source

2015-08-05 18:46:23

image Plein écran sur clic

Répondre

Questions connexes