Utilicé una presentación de diapositivas desde el sitio: http://www.sitepoint.com/ create-slide-show-plugin-angularjs /

Se agregaron pequeñas imágenes laterales. Me pregunto cómo obtengo que al hacer clic en las imágenes pequeñas devuelvan las imágenes grandes correspondientes.

Miniaturas agregadas con este código: (place templateurl.html)

<ul class="minimage" ng-show="image.visible" >

  <a ng-click="returner()"> <img ng-repeat="image in images" ng-src="/sliderAngular/img/{{image.src}}" width="70" height="56"/> </a>

</ul>

Este es mi intento, ¿cómo podría hacerlo funcionar? (lugar app.js)

scope.currentIndex=0;

scope.returner=function(){
   scope.currentIndex= ;

};

Llevo varios días intentando sin éxito realmente necesitar la ayuda de alguien que lo sepa. Si necesita más información, puede preguntarme, estoy muy limitado en inglés y angular.

2
Thiago Jem 29 ago. 2014 a las 13:00

2 respuestas

La mejor respuesta

Logré dejarlo como quería hace unos meses, ahora recordé esta pregunta y volví a dar una respuesta más completa para futuros lectores.

Coloque este código debajo de donde desea que aparezca el control deslizante

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div images="images" class="slider" id="mauseOnOut">
    <div  class="slide" ng-repeat="image in images" ng-show="image.visible"> 
        <a ng-href="{{image.url}}"><img ng-src="{{image.src}}" width="444" height="250"/>
        <p class="texto">{{image.texto}}</p>
        </a>
    </div>

    <ul class="minimagem" ng-show="images.length"> 
      <li ng-repeat="image in images"><a ng-click="returner($index)"><img ng-src="{{image.src}}" width="70" height="56"/></a></li>
    </ul>

    <div class="arrows">
        <a href="" ng-click="prev()" ><img  src="http://s5.postimg.org/orczpkx0z/left_arrow.png"/></a> <a href="" ng-click="next()"><img src="http://s5.postimg.org/qkfwdwi7n/right_arrow.png"/></a>
    </div>
</div>
    </div>
</div>

Coloque el código a continuación en su app.js, controller o en una página específica para directives.

myApp.directive('images', function factory($timeout) {
  var directiveDefinitionObject = {

    transclude: false,
    restrict: 'AE',
    multiElement: true,
    scope: {
        images: '='
    },

    link: function postLink(scope, iElement, iAttrs) { 
      scope.currentIndex=0;

    scope.returner = function(index){
    scope.currentIndex = index;
   };

        scope.next=function(){
            scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
        };

        scope.prev=function(){
            scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
        };

        scope.$watch('currentIndex',function(){
            scope.images. forEach(function(image){
                image.visible=false;
            });
            scope.images[scope.currentIndex].visible=true;
        });

        // Start: For Automatic slideshow

        var timer;

        var sliderFunc=function(){
            timer=$timeout(function(){

                scope.next();
                timer=$timeout(sliderFunc,3000);
            },3000);
        };

        sliderFunc();

        scope.$on('$destroy',function(){
            $timeout.cancel(timer);
        });

        var myDiv = document.getElementById('mauseOnOut');

        myDiv.onmouseover = function() { 
            $timeout.cancel(timer);
        };

        myDiv.onmouseout = function() { 
            timer=$timeout(sliderFunc,3000);
        };

         // End : For Automatic slideshow
   }
  };
  return directiveDefinitionObject;
});

Coloque el código a continuación en su controller y edite como desee:

$scope.images = [

  {
        src:'http://s5.postimg.org/b2wzny14n/img1.png',
        url:'',
        texto:'Trees and mountains a pleasant and peaceful environment to live .'
  },
  {
        src:'http://s5.postimg.org/vlrvt0f1z/img2.jpg',
        url:'',
        texto:'Yellow and pond landscape sky that inspires a reflection on the existence'
  },
  {
        src:'http://s5.postimg.org/wms4i4w1j/img3.jpg',
        url:'',
        texto:'Yellow and pond landscape sky that inspires a reflection on the existence '
  },
  {
        src:'http://s5.postimg.org/k0hplatkn/img4.png',
        url:'',
        texto:'The cold and snow prevents does not prevent good news for those seeking good '
  },
  {
        src:'http://s5.postimg.org/nitphougn/img5.png',
        url:'',
        texto:'Imposing Rhino with your muscles , bones and horns forming one of the strongest animals of nature '
  }
   ];

Vea el CSS y el control deslizante que funcionan en jsFiddle

1
Thiago Jem 25 ene. 2015 a las 20:05

En realidad, hay muchas cosas mal con el código que compartió inicialmente, algunas de las cuales son:

  • La etiqueta UL no tiene artículos LI
  • ng-show = "image.visible" está fuera de ng-repeat, por lo que la imagen siempre estará indefinida
  • ng-repeat estaba en la etiqueta img, por lo que solo habría un enlace con toneladas de imágenes dentro.

Ejemplo de código usando $ index (atributo disponible dentro de las directivas ng-repeat):

<ul class="minimage" ng-show="images.length"> <!-- show if there are items  -->
    <li ng-repeat="image in images"><a ng-click="returner($index)"><img ng-src="/sliderAngular/img/{{image.src}}" width="70" height="56"/></a></li>
</ul>

Y:

scope.currentIndex=-1;
scope.returner = function(index){
    scope.currentIndex = index;
};
2
HeberLZ 2 sep. 2014 a las 06:22