I'm currently in the process of creating a photo album using AngularJS and CSS, but I'm facing an issue with the pictures showing up too large. Despite my efforts to resize them, they still appear oversized. I've even tried resizing them in Photoshop, but that didn't solve the problem as they didn't display correctly in the preview. Any insights on where I might be going wrong would be greatly appreciated. Below is the snippet of JS code...
'use strict';
angular.module('example366', ['ngAnimate', 'ngTouch'])
.controller('MainCtrl', function ($scope) {
// Set of Photos
$scope.photos = [
{src: 'Images/KyahMaxCabin.jpg', desc: 'Kids Cabin', height: "250px", width: "300px"},
{src: 'http://farm9.staticflickr.com/8449/7918424278_4835c85e7a_b.jpg', desc: 'Image 02'},
{src: 'http://farm9.staticflickr.com/8457/7918424412_bb641455c7_b.jpg', desc: 'Image 03'},
{src: 'http://farm9.staticflickr.com/8179/7918424842_c79f7e345c_b.jpg', desc: 'Image 04'},
{src: 'http://farm9.staticflickr.com/8315/7918425138_b739f0df53_b.jpg', desc: 'Image 05'},
{src: 'http://farm9.staticflickr.com/8461/7918425364_fe6753aa75_b.jpg', desc: 'Image 06'}
];
// initial image index
$scope._Index = 0;
// if a current image is the same as requested image
$scope.isActive = function (index) {
return $scope._Index === index;
};
// show prev image
$scope.showPrev = function () {
$scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.photos.length - 1;
};
// show next image
$scope.showNext = function () {
$scope._Index = ($scope._Index < $scope.photos.length - 1) ? ++$scope._Index : 0;
};
// show a certain image
$scope.showPhoto = function (index) {
$scope._Index = index;
};
});
The code was sourced from a tutorial website, and for now, only the first picture is mine. Before adding more photos, I wanted to experiment with it and observe the outcome. Therefore, feedback on adjusting the size of the first photo would be helpful. As I am new to JavaScript, this learning journey is quite exciting for me.
Many thanks!