zeigen eine groß siize Bild bei Klick auf das Vorschaubild und geben Opazität

-2

Ich denke, es ist besser, dass ich so erklären:zeigen eine groß siize Bild bei Klick auf das Vorschaubild und geben Opazität

6 kleine Bilder auf der Seite ist es nebeneinander
Benutzer klickt Einer von ihnen
Alle 5 anderen Bilder (außer dem Bild, auf das der Benutzer geklickt hat) haben eine Deckkraft von 0,7
Eine große Version des Bildes (das Bild, das der Benutzer ausgewählt wurde) wird angezeigt. (Ich habe ein img-Tag und das Bild src wird die src des Tags ersetzen)

Können Sie mir sagen, wie kann ich das tun? Ich bevorzuge JavaScript und Angular JS, aber wenn Sie es brauchen, gibt es kein Problem, wenn Sie auch JQuery verwenden. entschuldige mein schlechtes Englisch. Danke Update: einige Benutzer fragte mich, was ich versucht ... Das ist mein Code und ich weiß, es wird nicht funktionieren ... das ist, warum ich frage diese von Ihnen ...

<!DOCTYPE html> 
<html lang="fa-IR" data-ng-app="projects" data-ng-controller="projects_controller"> 
<!-- Website design by Mohsen_Nirouzad --> 
<head> 
    <!-- Adding meta information --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="author" content="Mohsen Nirouzad - http://AproZ.ir"> 
    <!-- defining stylesheets DO NOT delete the bellow codes if you don't have enough knowledge of web design --> 
    <!-- I used w3data.min.js for javascript templating engine so you've to change the bellow information in script tag --> 
    <meta name="application-name" content="{{application_name}}"> 
    <meta name="description" content="{{description}}"> 
    <meta name="keywords" content="{{keywords}}"> 
    <meta name="publisher" content="{{googleplus_url}}"> 
    <meta charset="UTF-8"> 
    <title>{{page_title}}</title> 
    <link rel="stylesheet" href="assets/css/app.css"> 
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="assets/css/w3rtl.min.css"> 
    <script src="assets/js/angular.min.js"></script> 
</head> 
    <body> 
    <div data-ng-include="'variables/sidenav.html'"></div> 
    <div style="margin-right:25%" class="w3-row-padding"> 
     <div class="w3-col s6"> 
      <div data-ng-include="'variables/logo1.html'"></div> 
      <div class="w3-row-padding"> 
       <div class="w3-col"> 
        <div class="w3-col s6"> 
         <img src="{{img1}}" alt="{{img1_alt}}" title="{{img1_title}}"><br> 
         <img src="{{img2}}" alt="{{img2_alt}}" title="{{img2_title}}"><br> 
         <img src="{{img3}}" alt="{{img3_alt}}" title="{{img3_title}}"> 
        </div> 
        <div class="w3-col s6"> 
         <img src="{{img4}}" alt="{{img4_alt}}" title="{{img4_title}}"><br> 
         <img src="{{img5}}" alt="{{img5_alt}}" title="{{img5_title}}"><br> 
         <img src="{{img6}}" alt="{{img6_alt}}" title="{{img6_title}}"> 
        </div> 
       </div> 
      </div> 
      <div> 
       <a href="javascript:void(0)" hreflang="fa-IR"> 
        <i class="fa fa-square-o"></i> 
       </a> 
       <a href="javascript:void(0)" hreflang="fa-IR"> 
        <i class="fa fa-square-o"></i> 
       </a> 
       <a href="javascript:void(0)" hreflang="fa-IR"> 
        <i class="fa fa-square-o"></i> 
       </a> 
       <a href="javascript:void(0)" hreflang="fa-IR"> 
        <i class="fa fa-square-o"></i> 
       </a> 
       <a href="javascript:void(0)" hreflang="fa-IR"> 
        <i class="fa fa-square"></i> 
       </a> 
       <a href="javascript:void(0)" hreflang="fa-IR"> 
        <i class="fa fa-square-o"></i> 
       </a> 
       <a href="javascript:void(0)" hreflang="fa-IR"> 
        <i class="fa fa-square-o"></i> 
       </a> 
      </div> 
     </div> 
     <div class="w3-col s6"> 

     </div> 
     </div> 
    <div data-ng-include="'variables/footer.html'"></div> 
    <script> 
     var application = angular.module('projects',[]); 
     application.controller('projects_controller',function($scope){ 
     $scope.description='Some Description', 
     $scope.keywords='key1,key2,key3', 
     $scope.application_name='Sarabon', 
     $scope.googleplus_url='#', 
     $scope.page_title='پروژه ها' 
    }); 
    </script> 
</body> 

</html>

Quelle

2016-07-24 Mohsen Nirouzad

ich meinen Code hinzugefügt, aber es ist unvollständig, so wird es nicht funktionieren ... –

Warum Minuspunkte? Ich wollte nur eine Antwort bekommen ... :( –

Verwenden ng-click einen Bereich Variable wie selectedImage zu setzen, die

in ng-class und ng-src für großes Bild verwendet werden kann

// small image 
<img ng-src="{{img1}}" 
    alt="{{img1_alt}}" 
    title="{{img1_title}}" 
    ng-click="selectImage(img1)" 
    ng-class="{'low-opacity-class' : selectedImage && selectedImage != img1}}" 

> 
// big image 
<img ng-if="selectedImage" ng-src="selectedImage ">

In Controller:

$scope.selectedImage = null; 
$scope.selectImage=function(img){ 
    $scope.selectedImage = img; 
}

Quelle

2016-07-24 14:31:03 charlietfl

Vielen Dank für Ihren Kommentar, ich verstand, was ich tun muss :) –

Eine Lösung besteht darin, ein großes verstecktes div zu erstellen, das den gesamten Bildschirm einnimmt und ein img-Tag ohne src-Attribut erstellt. in "onClick" -Ereignis (OnClick ist für js. Ich weiß nicht, wie eckige Griffe klickt!), setzen Sie dieses div sichtbar (mit css "display property") und setzen Sie Bild src auf was Sie wollen. CSS für das Vollbild div kann wie folgt sein:

.fullscreen{ 
 
    display:none; 
 
    width:100%; 
 
    height:100%; 
 
    background-color: black; 
 
    opacity: 0.8; 
 
    position: absolute; 
 
    left:0; 
 
    top:0 
 
    }

<div class = "fullscreen"> 
 
    <img src="#"/> 
 
</div>

dann müssen Sie nur ein paar Codezeilen hinzufügen Anzeige Eigenschaft des div zu ändern und src ändern Attribut img auf Ihren Wunsch ein.

Quelle

2016-07-24 14:27:45

'Onclick' gehört nicht in eckige Apps – charlietfl

Vielen Dank für Ihren hilfreichen Kommentar, und können Sie mir sagen, wie kann ich für die Seite definieren, dass, wenn der Benutzer auf ein Bild klickt, Es gibt eine Opazität für andere Bilder? –

zeigen eine groß siize Bild bei Klick auf das Vorschaubild und geben Opazität

Antwort

Verwandte Themen