0

I'm setting up a gallery view for a local house builder using bootstrap and Angularjs 1.5X. For the gallery view I want to show a list of thumbnail images down one side, and then the full image on the other. My problem is that I am trying to call the images in an array, that are also inside of another array within that first array, like so.

app.controller('ImageController', function () {
        this.images = gallerys;
    });

    app.controller('GalleryController', function () {
            this.current = 0;
            this.setCurrent = function (newGallery) {
            this.current = newGallery || 0;
        };
    });     
var gallerys = [{
            images: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    }]
        },{
            images: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    },

I want to just repeat through all the thumb images in the first images array.I want to use each images array on a different page.This is what my code looks like in the HTML view.

<div class="content" ng-controller="ImageController as image">
  <div class="col-md-8">
    <div ng-controller="GalleryController as gallery">
      <div ng-repeat="image in image.images">
        <img class="img-full || img-responsive" ng-src="{{image.images[gallery.current].full}}">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <ul class="img-thumb" ng-controller="GalleryController as gallery">
      <li ng-repeat="image in image.images">
        <img ng-src="{{image.images[0].thumb}}">
      </li>
    </ul>
  </div>
</div>

I have a demo of this site up if that helps anyone. http://demo.ranlife.com/beaconhomes2/monson.php

Improve this question
1
  • It's a poor choice to call so much things image and images. I suggest you not to rename ImageController to image but scope or something. Also do not rename gallerys to images, that creates confusion Commented Feb 10, 2016 at 21:27

2 Answers 2

Reset to default
0

This would work with your current controller:

<div class="content" ng-controller="ImageController as image">
  <div class="col-md-8">
    <div>
      <div ng-repeat="image in image.images">
        <div ng-repeat="image in images.images">
            <img class="img-full || img-responsive" ng-src="{{image.full}}">
        </div>
      </div>
   </div>
  <div class="col-md-4">
    <ul class="img-thumb">
      <li ng-repeat="image in image.images">
         <div ng-repeat="thumbnail in image.images">
            <img ng-src="{{image.thumb}}">
         </div>
      </li>
    </ul>
  </div>
</div>

It is super confusing that you are referring to your gallery in your controller as image and then naming your variable in ng-repeat as image. Try this for clarity:

Change your controller to: 

app.controller('ImageController', function () {
        this.gallery= gallerys;
 });

And your markup to:

<div class="content" ng-controller="ImageController as imageCtrl">
  <div class="col-md-8">
    <div>
      <div ng-repeat="gallery in imageCtrl.gallery">
        <div ng-repeat="image in gallery.images">
            <img class="img-full || img-responsive" ng-src="{{image.full}}">
        </div>
      </div>
   </div>
  <div class="col-md-4">
    <ul class="img-thumb">
      <li ng-repeat="gallery in imageCtrl.gallery">
         <div ng-repeat="image in gallery.images">
            <img ng-src="{{image.thumb}}">
         </div>
      </li>
    </ul>
  </div>
</div>

Furthermore, change your gallery object to:

var gallerys = [{
            gallery: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    }]
        },{
            gallery: [
                    {
                        full: 'img/gallery/monson/monson_full_01.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_01.JPG'
                    },
                    {
                        full: 'img/gallery/monson/monson_full_02.JPG',
                        thumb: 'img/gallery/monson/thumbnail/monson_thumb_02.JPG'
                    },

Edited

To display only one full image at a time on ng-click of the thumbnails change your controller to:

app.controller('ImageController', function () {
        this.gallery= gallerys;
        this.activeImage = null;
 });

Set the active image on your markup by calling ng-click within ng-repeat like so:

<li ng-repeat="gallery in imageCtrl.gallery">
    <div ng-repeat="image in gallery.images">
        <img ng-src="{{image.thumb}}" ng-click="imageCtrl.activeImage = image.full">
    </div>
</li>

Somewhere else just display the activeImage in the controller like so:

 <img ng-src="{{imageCtrl.activeImage}}">
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

For the full version of the image, how would I show only one of them? I intend to do an ng-click on the thumbnails so that when they are clicked, it shows the full image next to it.
I've added the answer to your question to the last part of the answer. Hope that helps. Don't forget to up-vote the correct answer.
I'd love to up-vote this, but I don't have enough rep-points yet. I do have a couple more questions if that's alright? First off, this shows all the image arrays, how do I just show the first array, second array, ect. I though I could do <div ng-repeat="image in gallery[0].images"> but that doesn't work. The second question is how to show a default image before I select the active one. I really appreciate the help.
Your first question is answered here. Second question: set the 'activeImage' to your default image upon loading your controller with ng-init and set it again to the corresponding image once they have loaded. You are going to have to use promises which is a whole topic on its own.
0

You have several name collisions like image and images, which does not cause a problem itself but makes it hard to understand what references what. Try something like this:

app.controller('ImageController', function () {
    this.gallerys = gallerys; // Renamed images to gallerys inside ImageController
});

...

<div class="content" ng-controller="ImageController as imageScope">
  <div class="col-md-8">
    <div ng-controller="GalleryController as gallery">
      <div ng-repeat="image in imageScope.gallerys[gallery.current].images">
        <img class="img-full || img-responsive" ng-src="{{image.full}}">
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <ul class="img-thumb" ng-controller="GalleryController as gallery">
      <li ng-repeat="image in imageScope.gallerys[0].images">
        <img ng-src="{{image.thumb}}">
      </li>
    </ul>
  </div>
</div>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.