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.

  • javascript
  • jquery
  • html
  • angularjs
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

版权声明：本文标题：javascript - How to display image in large size onmouseover inside a dynamic div? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742126334a2421959.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。