admin管理员组

文章数量:1323714

I am trying to make a simple photo gallery in angularJS. Below is the code

index.html

<!DOCTYPE html>
<html >
<head> 
    <title></title> 

    <script src=".2.0rc1/angular.js"></script>
    <script type="text/javascript" src=".11.1/jquery.min.js"></script>
    <script src="test.js"></script>

</head>
<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">         
        <div id="dp"></div>
    </div> 
</body>
</html>

test.js (Controller)

function testMe(imgSrc) {
    alert(imgSrc);
}

angular
    .module('testModule', [])
    .controller('testCtrl', function($scope) {
        var photoSource = [
            ["images/ph1.jpg", "images/ph2.jpg"],
            ["images/ph5.jpg", "images/ph6.jpg"]
        ];
        var body = "<table>";
        var row = 2;
        var col = 2;
        for (var i = 0; i < row; i++) {
            body += "<tr>";
            for (var j = 0; j < col; j++) {
                body += "<td> <img id='" + i + j + "' src='" + photoSource[i][j] + "' onmouseover=testMe('" + photoSource[i][j] + "');></td>";
            }
            body += "</tr>";
        }
        body += "</table>";
        console.log(body);
        $("#dp").html(body);
    });

The problem is that, when the mouse is over an image I want to display that image in the center on a div tag. But this portion I could not achieve.

I am trying to make a simple photo gallery in angularJS. Below is the code

index.html

<!DOCTYPE html>
<html >
<head> 
    <title></title> 

    <script src="http://code.angularjs/1.2.0rc1/angular.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="test.js"></script>

</head>
<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">         
        <div id="dp"></div>
    </div> 
</body>
</html>

test.js (Controller)

function testMe(imgSrc) {
    alert(imgSrc);
}

angular
    .module('testModule', [])
    .controller('testCtrl', function($scope) {
        var photoSource = [
            ["images/ph1.jpg", "images/ph2.jpg"],
            ["images/ph5.jpg", "images/ph6.jpg"]
        ];
        var body = "<table>";
        var row = 2;
        var col = 2;
        for (var i = 0; i < row; i++) {
            body += "<tr>";
            for (var j = 0; j < col; j++) {
                body += "<td> <img id='" + i + j + "' src='" + photoSource[i][j] + "' onmouseover=testMe('" + photoSource[i][j] + "');></td>";
            }
            body += "</tr>";
        }
        body += "</table>";
        console.log(body);
        $("#dp").html(body);
    });

The problem is that, when the mouse is over an image I want to display that image in the center on a div tag. But this portion I could not achieve.

Share Improve this question edited Dec 7, 2018 at 21:21 halfer 20.3k19 gold badges109 silver badges202 bronze badges asked Oct 8, 2016 at 1:00 priyanka.sarkarpriyanka.sarkar 26.5k43 gold badges132 silver badges181 bronze badges 3
  • You can use the Angular built in directive ng-mouseover. You assign a function of the scope to it, lets say resizeImg() and there, in your controller you resize the image – MarBVI Commented Oct 8, 2016 at 2:22
  • this is not your answer but I remend you to not mix Jquery and Angular together. your code its not standard way of using Angular and either Jquery. – Sajed Commented Oct 11, 2016 at 2:28
  • I cried when I saw angularjs and jquery tags in the same question. – Mistalis Commented Oct 12, 2016 at 14:50
Add a ment  | 

3 Answers 3

Reset to default 7 +50

you don't need to manipulate the html inside your controller instead use bindings of angular so your javascript bees

function testMe(imgSrc) {

        alert(imgSrc);
     } 

angular
.module('testModule', [])
.controller('testCtrl', function ($scope) {

    $scope.photoSource = [
                    [ "images/ph1.jpg","images/ph2.jpg"],
                    [ "images/ph5.jpg","images/ph6.jpg"]                    
               ]; 

    $scope.showFullImage = function(photoSrc) {
      // this function will call when you mouseover so add logic here and photosrc will be current mouseover image src
       }
});

now in your html use this photoSource scope variable to generate table

<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">         
        <div id="dp">
<table>
 <tr ng-repeat="photos in photoSource">
  <td ng-repeat="photo in photos">
    <img ng-src="{{photo}}" ng-mouseover="showFullImage(photo)" />
  </td>
 </tr>
</table>
</div>
    </div> 
</body>

Two Way Data-Binding is a useful feature of AngularJS. You do not need to write too much logic in your JavaScript.

Try this:

angular.module('testModule', []).controller('testCtrl', function ($scope) {
    $scope.photoSource = [
        [ "images/ph1.jpg","images/ph2.jpg"],
        [ "images/ph5.jpg","images/ph6.jpg"] 
    ];
    $scope.fullImage = function (imgSrc) {
        $scope.showImage = imgSrc;
    }
});
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testModule" ng-controller="testCtrl">
    <div style="width: 60%; margin: 0 auto;">
        <div id="ds">
            <img ng-src="{{showImage}}"/>
        </div>
        <div id="dp" style="display: flex;">
            <div ng-repeat="photos in photoSource">
                <img class="item" ng-src="{{photo}}" ng-mouseover="fullImage(photo)" ng-repeat="photo in photos" style="max-width: 100%"/>
            </div>
        </div>
    </div>
</body>

This is the logic I would use to solve this problem. I am assuming you want the hovered item to be shown within a modal dialog box or a centered div on the page.

  1. Keep a div with required centering CSS (margin-left, margin-right: auto) hidden using a boolean say isVisible, set to false in your controller.

  2. Keep an empty image tag within this container. You can change the image src using ng-src based on a variable. Keep this variable source pointing to a placeholder image. We will later update this when the user hovers over an image.

  3. Using ng-mouseover call a function and pass the image source to the function as a parameter

  4. Within this function, use the image source to set the source of the placeholder image

  5. Show the hidden div by setting the flag, isVisible to true

  6. You will also need to handle mouse-out since the container will need to be hidden once the user hovers out of the image.

Some points to keep in mind when working with Angular JS:

  1. Do not use jQuery for DOM manipulation. You can show or hide content using ng-show/ng-hide or add/remove classes using ng-class directives. Also ng-if can actually render or remove content when needed.

  2. Do not dynamically insert HTML into the page. If you absolutely need to do this, use a custom directive.

本文标签: javascriptHow to display image in large size onmouseover inside a dynamic divStack Overflow