How to display images on hover in AngularJS

Question

image HTML

I want to display above images on hover the below images. but I can't get the idea how to display it why because i am new to angular

<div class="col-md-7" ng-controller="slideController">
    <div class="text-center">
    <?php 
        $id = $_GET['id'];
        $result1 = mysqli_query($db, "SELECT * FROM product_images WHERE product_id ='$id' ");
        while($row1 = mysqli_fetch_assoc($result1)) { ?>
            <img src="../backend/uploads/<?php echo $row1['image']; ?>" width="200px" height="300px" ng-model="id[<?php echo $row1['id']; ?>]" ng-hide="hideImage">
    <?php } ?>
    <hr>
    <?php 
        $id = $_GET['id'];
        $result1 = mysqli_query($db, "SELECT * FROM product_images WHERE product_id ='$id' ");
        while($row1 = mysqli_fetch_assoc($result1)) { ?>
            <img src="../backend/uploads/<?php echo $row1['image']; ?>" width="100px" height="100px" ng-mouseover="slideImage(<?php echo $row1['id']; ?>)">
    <?php } ?>
    </div>
</div>

JS

var slide=angular.module("myApp",[])
slide.controller('slideController', function ($scope) {
$scope.id = {};
$scope.hideImage = true;
console.log($scope.id)

$scope.slideImage = function(id) {
    if (id == $scope.id) {
        $scope.hideImage = false;
    }
}

Icycool · Accepted Answer · 2017-10-04 06:39:31Z

0

It's better to output backend data as javascript object, and then act on that object in angular.

<div class="col-md-7" ng-controller="slideController">
    <div class="text-center">
      <img ng-repeat='image in images' ng-src="{{image.url}}" width="200px" height="300px" ng-hide="!image.show">
    <hr>
      <img ng-repeat='image in images' ng-src="{{image.url}}" width="100px" height="100px" ng-mouseenter="image.show = true" ng-mouseleave="image.show = false">
    </div>
</div>

<script>var images = [
  <?php 
    $id = $_GET['id'];
    $result = mysqli_query($db, "SELECT * FROM product_images WHERE product_id ='$id' ");
      while($row = mysqli_fetch_assoc($result)) { ?>
  {
    url: "<?php echo $row['image']; ?>",
    id: <?php echo $row['id']; ?>
  },
  <?php } ?>
]</script>

Edit: I see you are trying to use the center area as main viewer like a carousel. In this case it is better to assign a variable instead of using ng-repeat.

angular.module('test', []).controller('slideController', SlideController);

function SlideController($scope) {
  $scope.images = [
    { id: 1, url: 'https://cdn.pixabay.com/photo/2015/04/17/09/36/domestic-cat-726989_960_720.jpg' },
    { id: 2, url: 'https://cdn.pixabay.com/photo/2014/12/03/21/20/kittens-555822_960_720.jpg' },
    { id: 3, url: 'https://cdn.pixabay.com/photo/2013/09/29/12/38/cat-188088_960_720.jpg' },
    { id: 4, url: 'https://cdn.pixabay.com/photo/2015/11/15/20/21/cat-1044750_960_720.jpg' },
  ]
  
  $scope.mainImage = $scope.images[0];
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div class="col-md-7" ng-app="test" ng-controller="slideController">
  <div class="text-center">
    <img ng-src="{{mainImage.url}}" width="200px" height="300px">
    <hr>
    <img ng-repeat="image in images" ng-src="{{image.url}}" width="100px" height="100px" ng-mouseenter="$parent.mainImage = image">
  </div>
</div>

edited Oct 4, 2017 at 6:39

answered Oct 3, 2017 at 4:47

Icycool

7,1991 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Naren Murali Over a year ago

@BhaskararaoGummidi This should be the correct answer, I am withdrawing mine, since its not the correct approach. But also refer here

Naren Murali Over a year ago

@Icycool I think the array loaded is invalid since there is no comma in between the objects of the array, can you change this, I found this link for loading into array here, Thanks, great answer!

Naren Murali Over a year ago

@Icycool the Array will have a comma in the last element of the array is that fine? Can you provide the complete JS for the angular array, it should be a scope variable, sorry the answer is incomplete so I am asking this, also first element should be shown by default

Icycool Over a year ago

@NarenMurali yes i always use js array with comma in last element for version control purpose, so it's fine. If you want to show first element by default, you can set $scope.images[0].show = true in the controller.

Bhaskararao Gummidi Over a year ago

@Icycool Excellent sir......but once mouseleave the image the default image disappearing.

|

Collectives™ on Stack Overflow

How to display images on hover in AngularJS

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related