{"action":"created","issue":{"url":"https://api.github.com/repos/nopSolutions/nopCommerce/issues/3405","repository_url":"https://api.github.com/repos/nopSolutions/nopCommerce","labels_url":"https://api.github.com/repos/nopSolutions/nopCommerce/issues/3405/labels{/name}","comments_url":"https://api.github.com/repos/nopSolutions/nopCommerce/issues/3405/comments","events_url":"https://api.github.com/repos/nopSolutions/nopCommerce/issues/3405/events","html_url":"https://github.com/nopSolutions/nopCommerce/issues/3405","id":379232685,"node_id":"MDU6SXNzdWUzNzkyMzI2ODU=","number":3405,"title":"Magnific Popup Gallery Issue","user":{"login":"cklenk","id":12185742,"node_id":"MDQ6VXNlcjEyMTg1NzQy","avatar_url":"https://avatars0.githubusercontent.com/u/12185742?v=4","gravatar_id":"","url":"https://api.github.com/users/cklenk","html_url":"https://github.com/cklenk","followers_url":"https://api.github.com/users/cklenk/followers","following_url":"https://api.github.com/users/cklenk/following{/other_user}","gists_url":"https://api.github.com/users/cklenk/gists{/gist_id}","starred_url":"https://api.github.com/users/cklenk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cklenk/subscriptions","organizations_url":"https://api.github.com/users/cklenk/orgs","repos_url":"https://api.github.com/users/cklenk/repos","events_url":"https://api.github.com/users/cklenk/events{/privacy}","received_events_url":"https://api.github.com/users/cklenk/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-11-09T16:33:02Z","updated_at":"2018-11-09T19:49:43Z","closed_at":null,"author_association":"NONE","body":"nopCommerce version: 4.1\r\n\r\nSteps to reproduce the problem: Upload several images to a product. Enable picture zoom in store settings. Go to that product and click on a picture, there is no way to scroll through the pictures either using the keyboard. No left or right icons show up either.\r\n\r\nI see under the magnificPopup settings that gallery is enabled, however it doesn't seem to do anything. You can even see it on the default store (example: http://demo.nopcommerce.com/build-your-own-computer). It should behave like it shows here http://dimsemenov.com/plugins/magnific-popup/ (under gallery examples).\r\n\r\nThanks"},"comment":{"url":"https://api.github.com/repos/nopSolutions/nopCommerce/issues/comments/437475393","html_url":"https://github.com/nopSolutions/nopCommerce/issues/3405#issuecomment-437475393","issue_url":"https://api.github.com/repos/nopSolutions/nopCommerce/issues/3405","id":437475393,"node_id":"MDEyOklzc3VlQ29tbWVudDQzNzQ3NTM5Mw==","user":{"login":"cklenk","id":12185742,"node_id":"MDQ6VXNlcjEyMTg1NzQy","avatar_url":"https://avatars0.githubusercontent.com/u/12185742?v=4","gravatar_id":"","url":"https://api.github.com/users/cklenk","html_url":"https://github.com/cklenk","followers_url":"https://api.github.com/users/cklenk/followers","following_url":"https://api.github.com/users/cklenk/following{/other_user}","gists_url":"https://api.github.com/users/cklenk/gists{/gist_id}","starred_url":"https://api.github.com/users/cklenk/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cklenk/subscriptions","organizations_url":"https://api.github.com/users/cklenk/orgs","repos_url":"https://api.github.com/users/cklenk/repos","events_url":"https://api.github.com/users/cklenk/events{/privacy}","received_events_url":"https://api.github.com/users/cklenk/received_events","type":"User","site_admin":false},"created_at":"2018-11-09T19:49:43Z","updated_at":"2018-11-09T19:49:43Z","author_association":"NONE","body":"I actually modified the _ProductDetailsPictures, this is what I came up with. It seems to work. I even added in conditions for gallery vs single image. What do you think?\r\n\r\n```\r\n@model ProductDetailsModel\r\n@{\r\n\tHtml.AddScriptParts(ResourceLocation.Footer, \"~/lib/magnific-popup/jquery.magnific-popup.min.js\");\r\n\tHtml.AddCssFileParts(\"~/lib/magnific-popup/magnific-popup.css\");\r\n}\r\n<div class=\"gallery\">\r\n\t<div class=\"picture\">\r\n\t\t@if (Model.DefaultPictureZoomEnabled && Model.PictureModels.Count == 1)\r\n\t\t{\r\n\t\t\t<a href=\"@Model.DefaultPictureModel.FullSizeImageUrl\" title=\"@Model.DefaultPictureModel.Title\" id=\"main-product-img-lightbox-anchor-@Model.Id\">\r\n\t\t\t\t<img alt=\"@Model.DefaultPictureModel.AlternateText\" src=\"@Model.DefaultPictureModel.ImageUrl\" title=\"@Model.DefaultPictureModel.Title\" itemprop=\"image\" id=\"main-product-img-@Model.Id\" />\r\n\t\t\t</a>\r\n\t\t\t<script asp-location=\"Footer\">\r\n                $(document).ready(function () {\r\n                    $('#main-product-img-lightbox-anchor-@Model.Id').magnificPopup({type: 'image'});\r\n                });\r\n\t\t\t</script>\r\n\t\t}\r\n\t\telse\r\n\t\t{\r\n\t\t\t<img alt=\"@Model.DefaultPictureModel.AlternateText\" src=\"@Model.DefaultPictureModel.ImageUrl\" title=\"@Model.DefaultPictureModel.Title\" itemprop=\"image\" id=\"main-product-img-@Model.Id\" />\r\n\t\t}\r\n\t</div>\r\n\t<span class=\"picture-caption\">@Model.DefaultPictureModel.Title</span>\r\n\t@if (Model.PictureModels.Count > 1 && Model.DefaultPictureZoomEnabled)\r\n\t{\r\n\t\t<div class=\"picture-thumbs\">\r\n\t\t\t@foreach (var picture in Model.PictureModels)\r\n\t\t\t{\r\n\t\t\t\t<a class=\"thumb-item\" href=\"@picture.FullSizeImageUrl\" alt=\"@picture.AlternateText\" title=\"@picture.Title\">\r\n\t\t\t\t\t<img src=\"@picture.ThumbImageUrl\" alt=\"@picture.AlternateText\" title=\"@picture.Title\" data-defaultsize=\"@picture.ImageUrl\" data-fullsize=\"@picture.FullSizeImageUrl\" />\r\n\t\t\t\t</a>\r\n\t\t\t}\r\n\t\t</div>\r\n\t\t<script asp-location=\"Footer\">\r\n                $(document).ready(function () {\r\n\t\t\t\t\t$('.picture-thumbs').magnificPopup(\r\n                        {\r\n\t\t\t\t\t\t\ttype: 'image',\r\n\t\t\t\t\t\t\tdelegate: 'a',\r\n                            removalDelay: 300,\r\n                            gallery: {\r\n\t\t\t\t\t\t\t\tenabled: true,\r\n\t\t\t\t\t\t\t\tnavigateByImgClick: true,\r\n\t\t\t\t\t\t\t\tpreload: [0, 1],\r\n                                tPrev: '@T(\"Media.MagnificPopup.Previous\")',\r\n                                tNext: '@T(\"Media.MagnificPopup.Next\")',\r\n                                tCounter: '@T(\"Media.MagnificPopup.Counter\")'\r\n                            },\r\n                            tClose: '@T(\"Media.MagnificPopup.Close\")',\r\n                            tLoading: '@T(\"Media.MagnificPopup.Loading\")'\r\n                        });\r\n                });\r\n\t\t</script>\r\n\t\t<script asp-location=\"Footer\">\r\n            $(document).ready(function () {\r\n                $('.thumb-item > img').on('click', function () {\r\n                    $('#main-product-img-@Model.Id').attr('src', $(this).attr('data-defaultsize'));\r\n                    $('#main-product-img-@Model.Id').attr('title', $(this).attr('title'));\r\n                    $('#main-product-img-@Model.Id').attr('alt', $(this).attr('alt'));\r\n                    $('#main-product-img-lightbox-anchor-@Model.Id').attr('href', $(this).attr('data-fullsize'));\r\n\t\t\t\t\t$('#main-product-img-lightbox-anchor-@Model.Id').attr('title', $(this).attr('title'));\r\n\t\t\t\t\t$('.picture-caption').text($(this).attr('title'));\r\n                });\r\n            });\r\n\t\t</script>\r\n\t}\r\n</div>\r\n```"}}
{"actor":{"display_login":"cklenk"}}