git-svn-id: https://msi/svn/firstRepo/WebClient/branches/NewRelease@57 0f545695-f87b-41b6-9a03-7f16563b5454

js/modules/item/item.js

@@ -73,6 +73,8 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                     images.find('img').load(function() {
                         self.galleryWall.fitWidth();
                     });
+
+                    $.mobile.loading('hide');
                 },
                 //render the content into div of view
                 render: function () {
@@ -94,6 +96,26 @@ define(['jquery', 'underscore', 'backbone', 'text!modules/item/itemViewTemplate.
                                     self.$arrayContent = self.$el.find('div[data-role="content"]');
                                     self.$arrayNavBar = self.$el.find('div[data-role="navbar"] a');
 
+                                    self.$photos = self.$el.find('#contentFoto a');
+                                    self.$photos.on("click", function(e){
+                                        e.preventDefault();
+                                        $.mobile.loading('show', {
+                                            text: 'Caricamento immagine...',
+                                            textVisible: true,
+                                            //theme: 'z',
+                                            html: ""
+                                        });
+
+                                        var photoID = $(this).attr("data-photoid");
+
+                                        self.$el.find('#photoFull').attr("src" , myManifest.Settings.DefaultURL + "/api/photo/" + photoID);
+                                        self.$el.find('#photoFull').load(function(){
+                                            $.mobile.loading('hide');                                            
+                                            self.$el.find('#fullPhotoPopupDialog').popup("open");    
+                                        });
+                                        
+                                    });
+
                                     for (var i = self.$arrayContent.length - 1; i >= 0; i--) {
                                         self.scrollPositions.push(0);
                                     };

js/modules/item/itemViewTemplate.html

@@ -3,15 +3,16 @@
     <h3 id='titoloRicetta'><%= unescape(ricetta.titolo)%></h3>
     <a id="backBtn" href="#" class="nav-glyphish-example ui-btn ui-icon-myHome ui-btn-icon-notext ui-btn-right" data-icon="custom"></a>
 </div>
-<style>
-    .freewallGallery {
-        margin: 15px;
+<% 
+    var widthImg = 320;
+    if( myManifest.Agent.device.type != "" )
+    {
+        //prendo la larghezza del viewport e sottraggo il 10%, poi divito per le due colonne
+        widthImg = (myManifest.Settings.Device.Width - (myManifest.Settings.Device.Width / 10)) / 2;
+        if(widthImg>320)
+            widthImg = 320;
     }
-    .brick img {
-        margin: 0;
-        display: block;
-    }
-</style>
+%>
 <div id="contentIngredienti" data-role="content">
 	<h1>Ingredienti</h1>
     <center><p id='ingredienti'>
@@ -37,7 +38,7 @@
     <h1>Foto</h1>
     <div id="Gallery" class="freewallGallery">
         <% _.each(ricetta.foto, function(fotoID) {%>
-            <div class='brick' style='width:250px;'><img src='<%=myManifest.Settings.DefaultURL%>/api/photo/<%=fotoID.ID%>' style="width: 100%;"></div>
+            <div class='brick' style='width:<%=widthImg%>px;'><a id="photo_<%=fotoID.ID%>" data-role="none" data-photoid="<%=fotoID.ID%>" href=""><img src='<%=myManifest.Settings.DefaultURL%>/api/photo/medium/<%=fotoID.ID%>' class="imageborder"></a></div>
         <%});%>
 	</div>
 </div>
@@ -60,6 +61,12 @@
     <h1 id="linkFonte" style="padding: 0px;"><a target="_blank" href="<%= ricetta.link_fonte%>">Link Fonte</a></h1>
     <% }%>
 </div>
+<div data-role="popup" id="fullPhotoPopupDialog">
+    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
+    <div role="main" class="ui-content">        
+        <img id="photoFull" src='' style="width: 100%;">
+    </div>
+</div>
 <div data-role="popup" id="popupDialog">
     <div data-role="header">
         <h1>Informazione</h1>