Develop Reference

Angular: Using $last to get last element visible using ng-show

So I have an ng-repeat container div inside which I have a bunch of images.
For each image, there is a div next to it. I want only the div of the final image to be visible and I achieve this using $last. This works like a charm.
Now I have a filter button in the page also, and when this button is clicked some of these images get hidden. This show/hide is done using ng-show on the image tag.
What I want is that when the filter button is clicked and some of the images are hidden, I want the div next to the final visible image to get shown. Seems like $last is not aware of the ng-show/hide value. How can I handle it so that the div next to the last visible image is still shown?
<div class='container' ng-repeat="image in album">
<div class='wrapper' ng-show="getFilterValue(image.imageId)">
<div><img src='{{image.src}}'></div>
<div class='embellish-end' ng-class='{'hidden':!$last}'>The End</div>
</div>
</div>
Any help is greatly appreciated!

Instead of using ng-show you could filter the ng-repeat using angular's built in ng-repeat filter. If your getFilterValue function returns a boolean this should work for you. Then your $last should know what is truly last based on what meets the filter criteria.
<div class='container' ng-repeat="image in album | filter:getFilterValue(image.imageId)">
<div class='wrapper'>
<div><img src='{{image.src}}'></div>
<div class='embellish-end' ng-class='{'hidden':!$last}'>The End</div>
</div>
</div>

Try putting the ng-show on the image rather than the whole div wrapper:
<div class='container' ng-repeat="image in album">
<div class='wrapper'>
<div ng-show="getFilterValue(image.imageId)"><img src='{{image.src}}'></div>
<div class='embellish-end' ng-class='{'hidden':!$last}'>The End</div>
</div>
</div>
Unrelated: use ng-src rather than src when using angularized image sources to avoid browser errors.

How to use angular-sortable-view in my Angular code?

I'm want to make some images sortable by dragging them around in my Angular website for which I'm trying to use angular-sortable-view. The demos look really good, but I just can't get it to work in my own code and I get no error whatsoever.
I've got a simple list defined in my controller:
$scope.prop = {};
$scope.prop.images = [
{id: 'http://www.adiumxtras.com/images/thumbs/dango_status_icon_set_7_19047_6248_thumb.png'},
{id: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Red_information_icon_with_gradient_background.svg/48px-Red_information_icon_with_gradient_background.svg.png'},
{id: 'https://www.haiku-os.org/docs/userguide/images/apps-images/icon-o-matic-icon_64.png'},
];
and my html looks as follows:
<div sv-root sv-part="prop.images">
<div ng-repeat="image in prop.images" sv-element>
<img src="{{ image.id }}">
</div>
</div>
I made a plunker here.
Does anybody know what I'm doing wrong? All tips are welcome!

You've got a couple problems here. The first being that angular-sortable-view is a separate module which you need to add to your app:
angular.module('sort', ['angular-sortable-view'])
In addition to that, since images are draggable in the browser, you must disable that:
<img draggable="false" ng-src="{{photo.id}}" />
Check the forked plunkr here: http://plnkr.co/edit/i8Z8jJGnJoGFgTMFej4Q?p=preview

According to https://github.com/kamilkp/angular-sortable-view to sort images you need to add draggable="false" atribute to your image:
<img draggable="false" ng-src="{{image.id}}">

Display image with actual sizes onclick

Before posting here i was testing over 30 or so Jquery image plugins to make my images appear full width when clicked on.
the structure of the HTML is as follows:
<div class="whatever">
<img id="noonecares" src="pff"></img>
</div>
and not
<img ></img>
I'm not talking about zooming in the photos but displaying the whole image onclick instead
I'm looking for a Jquery solution preferably.
The solutions that i've been looking into are: zoomfancy easyzoom ajaxzoom ...
Thank y'all

If you just want a simple inline image expander then jQuery's toggleClass() is perfect for that. You shrink the images to a fixed size with CSS and then toggle it with a click.
DEMO

Something like
<div>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcRvA_rqizvEgVJhJwLbpgMz7CgGwnjW5BlXHrBNzRwRXsq7O3Gi" />
</div>
script
$("div").on("click", function() {
window.open($("img").attr("src"), "_blank", "menubar=1,resizable=1");
});
?
jsfiddle: http://jsfiddle.net/chrisbenseler/6GW6M/

This is my approach.
<div class="whatever">
<img id="noonecares" src="http://imagizer.imageshack.us/v2/100x75q90/21/0ss1.jpg"></img>
</div>
Script
$('.whatever').on('click','#noonecares', function(){
window.open($(this).attr('src'));
});
JSfiddle: http://jsfiddle.net/hFp6z/
UPDATE: If you want a plugin to zoom full size, then you can check fancybox or lightbox.

Trouble with an onClick event

I'm building a gallery and osm of the items will have multiple views - similar to items found in an etsy gallery - and I'm trying to figure out whats going wrong. I started this a while ago and it worked but as I'm not a coder (exclusively) and just teaching myself, I can't tell what has changed or what I'm missing.
The goal is to have a large image and three thumbnails. When one of the three thumbnails is selected it will replace the large image with the corresponding image.
The code:
Here is what I have as my js function I am linking in:
<script type="text/javascript">
function altViews(next_img) {
document.getElementById("big").src = next_img;
}
</script>
*(Note, it is giving me an error on line 4 : document.getElementById("big").src = next_img;)*
Here is the code I used for the image and the thumbnails:
<div class="artwork">
<img id="big" src="../images/_101111-1.png"/>
<div class="gallery-thumbnails">
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')">
<img class="gallery-thumb" src="images/_101111-3.jpg" onclick="altViews('../images/_101111-3.jpg')">
<img class="gallery-thumb" src="images/_101111-4.jpg" onclick="altViews('../images/_101111-4.png')">
</div>
<div class="rule">
</div>
</div>
If there are any details I've left out, please let me know. Also, I am a novice with js and php and teaching myself in my spare time so this might be a simple solution but I'm not familiar enough with it yet to figure it out.

You forgot to close the <img> tag adding a backslash to the end />
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')"/>

Click through images

I would like to know the best way to add a next and back button to click through my images. The images currently scroll left & right when you roll over a hotspot.
I have tried adding anchors to images, which works but is a bit messy.
Here is my code:
<div class="scrollWrapper" >
<div class="scrollableArea" >
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
</div>
</div>

Easiest way is to use a plugin to handle your slideshow, I like Malsup's cycle plugin, here's an example of what you're trying to do: http://jquery.malsup.com/cycle/int2.html

Instead of using a plugin, read this: http://blog.wearelaunchbox.com/?p=1029
This is great tutorial on how to make your own slider that you're talking about with very little jQuery. Let me know if this helps.
EDIT: Here is a jsfiddle running the right function how you want it, reworked from the tutorial.. You can take this code and rewrite the same function to make it go the other way.
http://jsfiddle.net/Ug3fu/3/