Develop Reference

Google images layout with angularjs and ui-bootstrap

I would like to make an image gallery that is similar to Google images gallery layout but I couldn't find any useful example to approach. I would like to show the larger image right below or above the image that is clicked using angularjs.
I started working on a plunker example but don't have any idea how to achieve this. I could able to display the image either on the top of all images or below all the images. Any thoughts on how to achieve this using angularjs and ui-bootstrap. Thanks in advance.
Plunker Link : https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview
View:
<div ng-controller="CollapseDemoCtrl">
<div ng-repeat="image in images track by $index">
<img src="{{image}}" ng-click="collapse=!collapse; setImage(image)" style="height:100px;width:100px;float:left;padding:20px;cursor:pointer">
</div>
<div>
<img uib-collapse="collapse" src="{{img}}"style="height:500px;width:500px;padding:20px">
</div>
</div>

You were nearly there. Only thing missing was to move the image inside the repeater.
Added this to your controller.
$scope.setImage = function(index){
$scope.visibleIndex = index;
}
And this to your markup:
<div ng-show="visibleIndex == $index"><br />
<img src="{{image}}" style="height:500px;width:500px;padding:20px">
</div>
I have updated your plunker:
https://plnkr.co/edit/IN65NEXKUDNFWIZeXDci?p=preview

the easiest way to change SVG icons in a span/div on hover?

I have a Bootstrap website with a navigation like this:
<a href="">
<div class="panel panel-default">
<div class="panel-body">
<img src="img/messages-grey.svg">
</div>
<div class="panel-footer panel-categories-footer-small">
Messages
</div>
</div>
</a>
And the icons are all named like this:
<img src="img/messages-grey.svg">
<img src="img/messages-blue.svg">
<img src="img/settings-grey.svg">
<img src="img/settings-blue.svg">
I already got the 'Messages' part to change colors with CSS, but I also need to make the .SVG icons to change from "-grey" to "-blue" whenever someone hovers over the linked DIV. How would I achieve this? Possibly with CSS and if not, jQuery?

It is not possible to change the src attribute of an img using CSS.
You can use Javascript, however. Doing it with jQuery makes it quite simple:
$("a").hover(function () {
$(this).data("originalImage", $(this).attr("src"));
$(this).find("img:first").attr("src", "path-to-new-img.svg");
}, function () {
var original = $(this).data("originalImage");
$(this).find("img:first").attr("src", original);
});

try using
a:hover{
background-image:url(img/messages-blue.svg);
}
in the css.

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.

Javascript on Multiple DIVs

I am using a Wordpress Theme (Incipiens) that has a show/hide Javascript to show a map on the contact page http://demo.themedev.me/wordpress_themes/incipiens/contact-us/
I want to use this function on a page multiple times to show/hide galleries.
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<a class="show_map" href="javascript:void(0)"></a>
<div class="map_container"><div class="thismap"><iframe>........</iframe></div>
</div>
I have this working but the call to the js opens all divs. I therefore put a unique div id round each gallery and slightly changed the javscript...
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<div id="silestone">
<div class="map_container">
[show_gallery width="124" height="124" galleryid="527"][/show_gallery]
</div>
</div>
</div>
It works but very oddly, sometimes the right one opens, sometimes the wrong one...not sure what i'm doing wrong, should I just have one javascript call that contains the ID's to all divs? If so how do I do this?

Since you have not shown the actual script you use for toggling, I assume you mean something like this (taken from the page) -
function (){
$(this).toggleClass('hide_map');
$('.map_container').slideToggle(400);
}
I would change that to -
function unhide(id){
$(this).toggleClass('hide_map');
$('#' + id).find('.map_container').slideToggle(400);
}
Does that work?

Integrate jQuery zoom effect with magazine-flipping Javascript

I'm trying to add a jquery zoom plugin within a turn.js magazine flipping effect. I've got them both working separately, but can't get the zoom effect within each magazine page like I'd want. Some of the code is below. All ideas are appreciated, thanks.
<!-- Zoom script -->
<script src='jquery.zoom.js'></script>
<script>
$(document).ready(function()
{
$('#ex1').zoom();
});
</script>
<!-- Zoom html -->
<span class='zoom' id='ex1'>
<img src='pages/daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
</span>
<!-- Magazine html -->
<div id="magazine">
<div style="background-image:url(pages/01.jpg);">
</div>
<div style="background-image:url(pages/02.jpg);">
</div>
<div style="background-image:url(pages/03.jpg);">
</div>

in similar situations i used successfully anythingZoomer
it makes easy to zoom arbitrary html elements, given taht a bit of tweaking is needed in order to suit your needs