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.org/1.2.0rc1/angular.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/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.
Please help me
4 Answers
Answers 1
you don't need to manipulate the html inside your controller instead use bindings of angular so your javascript becomes
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> Answers 2
Two Way Data-Binding is a most useful feature of AngularJS, so u do not need write so many logic in js.
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.com/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> Answers 3
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.
Keep a div with required centering CSS (margin-left, margin-right: auto) hidden using a boolean say isVisible, set to false in your controller.
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.
Using ng-mouseover call a function and pass the image source to the function as a parameter
Within this function, use the image source to set the source of the placeholder image
Show the hidden div by setting the flag, isVisible to true
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:
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.
Do not dynamically insert HTML into the page. If you absolutely need to do this, use a custom directive.
Answers 4
I can't write all of the code but you can see this small video I hope it would be helpful
0 comments:
Post a Comment