locked
masonry gallery does not working, what do i miss? RRS feed

  • Question

  • User1991482975 posted

    Hi, i pute here the link where you can check the page i have done, where masonry gallery does not work...

    Il looks like i have added all the right files.. what do i miss?

    This is the page :

    http://collectionhair-001-site13.gtempurl.com/Home/_T_CreationList

    Here my code

    his is my bundle :

    using System.Web;
    using System.Web.Optimization;
    
    namespace HairCollection3
    {
        public class BundleConfig
        {
            // Pour plus d’informations sur le regroupement, rendez-vous sur http://go.microsoft.com/fwlink/?LinkId=301862
            public static void RegisterBundles(BundleCollection bundles)
            {
                bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                         "~/Scripts/jquery.validate*"
                            ));
    
                bundles.Add(new ScriptBundle("~/bundles/unobtrusive").Include(
                         "~/Scripts/jquery.unobtrusive*"
                            ));
    
                bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));
    
                // Utilisez la version de développement de Modernizr pour développer et apprendre. Puis, lorsque vous êtes
                // prêt pour la production, utilisez l’outil de génération sur http://modernizr.com pour sélectionner uniquement les tests dont vous avez besoin.
                bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                            "~/Scripts/modernizr-*"));
    
                bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                          "~/Scripts/bootstrap.js",
                          "~/Scripts/respond.js",
                          "~/Scripts/flexslider.min.js",
                          "~/Scripts/global.js",
                          "~/Scripts/wp-embed.min.js"
                          ));
    
                bundles.Add(new ScriptBundle("~/bundles/masonry").Include(
                          "~/Scripts/masonry.min.js"
                          ));
    
                bundles.Add(new ScriptBundle("~/bundles/imagesloaded").Include(
                          "~/Scripts/imagesloaded.pkgd.js"
                          ));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css",
                          "~/Content/bootstrap-datepicker.css"
                          ));
    
                //BundleTable.EnableOptimizations = true;
    
            }
        }
    }

    in my _Layout page i added the following :

    Inside the HEAD section

        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")

    BOTTOM (before the body closing

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/bundles/masonry")
        @Scripts.Render("~/bundles/imagesloaded")
    
        @RenderSection("scripts", required: false)
    
        <script type="text/javascript">
            $(document).ready(function () {
                $("a").tooltip();
            });
        </script>
    
    </body>

    Help please!!

    Thursday, August 4, 2016 2:36 PM

Answers

  • User475983607 posted

    this is not the problem!

    Ok, but that does not negate the fact that you have many 404 errors and warnings.

    The problem is about masonry, which is not working and all the images are showe one  under the other, in stead of one next to the other, as it should be..

    Taking a closer at the errors in Developer Tools (F12) I found the following error.  

    Uncaught TypeError: $blocks.ImagesLoaded is not a function

    You have so many errors that I just didn't see it at first.  This could have something to do with the described symptom.

    Anyway, Googling the error I found this error can be due to masonry version and/or conflicts with other libraries.

    https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=Uncaught+TypeError%3A+%24blocks.ImagesLoaded+is+not+a+function

    I'm not sure what troubleshooting steps you have performed to this point.  However, I suggest that you come up with a troubleshooting plan.  Build a test project and include only the bits to get the masonry library functioning as outlined in Masonry's "Getting Started" documentation.  Once you get this working compare the file version to the versions you're using in the main site.  Update the main site as necessary.  

    If the main site is still not working, you might have a conflict with another library.  Add same file references from the main site to the test project until the test project fails like the main site (reproduce the error) then you'll know where the conflicts exists and go from there.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 5, 2016 12:44 PM
  • User61956409 posted

    Hi grafic.web,

    bundles.Add(new ScriptBundle("~/bundles/masonry").Include(
                          "~/Scripts/masonry.min.js"
                          ));

    According to your code and description, it seems that you are using Bundling feature to combine or bundle multiple files into a single file, but masonry gallery not working. You could try to add reference to "/Scripts/masonry.min.js" file directly in your web page instead of combining it in "~/bundles/masonry" and make sure if same issue will appear.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 12, 2016 6:55 AM

All replies

  • User475983607 posted

    All of your images references have a tilde (~) within the URL.  I'm guessing you have img tags that look like...

    <img src="~/Content/imagename.png" />

    The tilde is only valid in a server control.  

    Double check you markup.

    Thursday, August 4, 2016 2:58 PM
  • User1991482975 posted

    Hi mgebhard,

    this is not the problem!

    Tha images are well showed, as you can see in the link given.

    The problem is about masonry, which is not working and all the images are showe one  under the other, in stead of one next to the other, as it should be..

    HELP ME PLEASE!! I AM GETTING MAD...

    Friday, August 5, 2016 9:58 AM
  • User475983607 posted

    this is not the problem!

    Ok, but that does not negate the fact that you have many 404 errors and warnings.

    The problem is about masonry, which is not working and all the images are showe one  under the other, in stead of one next to the other, as it should be..

    Taking a closer at the errors in Developer Tools (F12) I found the following error.  

    Uncaught TypeError: $blocks.ImagesLoaded is not a function

    You have so many errors that I just didn't see it at first.  This could have something to do with the described symptom.

    Anyway, Googling the error I found this error can be due to masonry version and/or conflicts with other libraries.

    https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=Uncaught+TypeError%3A+%24blocks.ImagesLoaded+is+not+a+function

    I'm not sure what troubleshooting steps you have performed to this point.  However, I suggest that you come up with a troubleshooting plan.  Build a test project and include only the bits to get the masonry library functioning as outlined in Masonry's "Getting Started" documentation.  Once you get this working compare the file version to the versions you're using in the main site.  Update the main site as necessary.  

    If the main site is still not working, you might have a conflict with another library.  Add same file references from the main site to the test project until the test project fails like the main site (reproduce the error) then you'll know where the conflicts exists and go from there.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 5, 2016 12:44 PM
  • User1991482975 posted

    Hi, i know i have some errors about fonts, but this is not the issue...

    My problem is about mansory...

    i have the following error :

    bootstrap?v=DaqIxWsOwilAdDInFLpKLRP2i5CymEYGvyCsiR-eKoQ1:1 Uncaught TypeError: $blocks.ImagesLoaded is not a function
    
    $blocks.ImagesLoaded(function(){$blocks.masonry({itemSelector:".post-container"});n(".post-container").fadeIn()});n(document).ready(function(){setTimeout(function(){$blocks.masonry()},500)});n(window).resize(function(){$blocks.masonry()});n(".nav-toggle").on("click",function(){n(this).toggleClass("active");n(".mobile-navigation").slideToggle()});n(".search-toggle").on("click",function(){return n(this).toggleClass("active"),n(".header-search-block").slideToggle(),n(".header-search-block #s").focus(),!1});n(window).resize(function(){n(window).width()>1e3&&(n(".nav-toggle").removeClass("active"),n(".mobile-navigation").hide())});n(".flexslider").flexslider({animation:"slide",controlNav:!1,prevText:"Previous",nextText:"Next",smoothHeight:!0});var t=".post iframe, .post object, .post video, .widget-content iframe, .widget-content object, .widget-content iframe",i=function(t){n(t).each(function(){var t=n(this),u=t.parent(),i=u.width(),r;t.attr("data-origwidth")||(t.attr("data-origwidth",t.attr("width")),t.attr("data-origheight",t.attr("height")));r=i/t.attr("data-origwidth");t.css("width",i+"px");t.css("height",t.attr("data-origheight")*r+"px")})};i(t);n(window).resize(function(){i(t)});n(".tothetop").click(function(){return n("html,body").animate({scrollTop:0},500),n(this).unbind("mouseenter mouseleave"),!1})});!function(n,t){"use strict";function i(){if(!u){u=!0;for(var r,n,f,o=-1!==navigator.appVersion.indexOf("MSIE 10"),s=!!navigator.userAgent.match(/Trident.*rv:11\./),e=t.querySelectorAll("iframe.wp-embedded-content"),i=0;i<e.length;i++)(n=e[i],n.getAttribute("data-secret"))||(f=Math.random().toString(36).substr(2,10),n.src+="#?secret="+f,n.setAttribute("data-secret",f),o||s)&&(r=n.cloneNode(!0),r.removeAttribute("security"),n.parentNode.replaceChild(r,n))}}var r=!1,u=!1;t.querySelector&&n.addEventListener&&(r=!0);(n.wp=n.wp||{},n.wp.receiveEmbedMessage)||(n.wp.receiveEmbedMessage=function(i){var r=i.data,u,f,e,o,s,h,c;if((r.secret||r.message||r.value)&&!/[^a-zA-Z0-9]/.test(r.secret)){for(h=t.querySelectorAll('iframe[data-secret="'+r.secret+'"]'),c=t.querySelectorAll('blockquote[data-secret="'+r.secret+'"]'),u=0;u<c.length;u++)c[u].style.display="none";for(u=0;u<h.length;u++)(f=h[u],i.source===f.contentWindow)&&((f.removeAttribute("style"),"height"===r.message)&&((e=parseInt(r.value,10),e>1e3)?e=1e3:200>~~e&&(e=200),f.height=e),"link"===r.message&&(o=t.createElement("a"),s=t.createElement("a"),o.href=f.getAttribute("src"),s.href=r.value,s.host===o.host)&&t.activeElement===f&&(n.top.location.href=r.value))}},r)&&(n.addEventListener("message",n.wp.receiveEmbedMessage,!1),t.addEventListener("DOMContentLoaded",i,!1),n.addEventListener("load",i,!1))}(window,document)

    and i do not know how to fix...

    i already search on google and i dod not found any good answer

    if someone can help me to fix, xould be great!!

    Saturday, August 6, 2016 7:39 AM
  • User475983607 posted

    if someone can help me to fix, xould be great!!

    See my previous post.  You need to troubleshot.

    Saturday, August 6, 2016 10:07 AM
  • User1991482975 posted

    Hi mgebhard,

    your post are not helpful at all, it looks like your try to answer to many topic just to get points on your status..

    If you are not able to help peaople in solving the programming issue, please stop keeping answering with NO ANSWER.

    Still Waiting for someone that coul actually help me in sort it out

    Thanks

     

    Monday, August 8, 2016 7:37 AM
  • User2009744128 posted

    Hi grafic.web,

    I suggest you use media queries in your CSS along with the containers, as described here :

    @media only screen and (max-width : 1199px),
    only screen and (max-device-width : 1199px){
     #container {
     width: 1000px;
     }
    }
     
     
    @media only screen and (max-width : 999px),
    only screen and (max-device-width : 999px){
     #container {
     width: 800px;
     }
    }
     
    @media only screen and (max-width : 799px),
    only screen and (max-device-width : 799px){
     #container {
     width: 600px;
     }
    }
     
    @media only screen and (max-width : 599px),
    only screen and (max-device-width : 599px){
     #container {
     width: 400px;
     }
    }
     
    @media only screen and (max-width : 399px),
    only screen and (max-device-width : 399px){
     #container {
     width: 200px;
     }
    }
    

    to know more, and see the demo click here: https://designshack.net/articles/css/masonry/

    hopefully this will help.

    Monday, August 8, 2016 10:53 AM
  • User475983607 posted

    Hi mgebhard,

    your post are not helpful at all, it looks like your try to answer to many topic just to get points on your status..

    If you are not able to help peaople in solving the programming issue, please stop keeping answering with NO ANSWER.

    Still Waiting for someone that coul actually help me in sort it out

    Thanks

     

    I provided a systematic plan for troubleshooting a 3rd party library.  If you want to wait for someone to solve it for you that's fine too.  Good luck.

    Monday, August 8, 2016 11:07 AM
  • User1991482975 posted

    Hi mgebhard,

    nothing personal, i am sure you are very good in solving problem.

    I just thought somone had the same issue as me and he cuold help to sort it out...

    I really don't get... in debug and release mode (localhost) all works fine!!

    once i deply i check the page and it works no more...

    i am getting mad with this!!!

    Monday, August 8, 2016 12:48 PM
  • User61956409 posted

    Hi grafic.web,

    bundles.Add(new ScriptBundle("~/bundles/masonry").Include(
                          "~/Scripts/masonry.min.js"
                          ));

    According to your code and description, it seems that you are using Bundling feature to combine or bundle multiple files into a single file, but masonry gallery not working. You could try to add reference to "/Scripts/masonry.min.js" file directly in your web page instead of combining it in "~/bundles/masonry" and make sure if same issue will appear.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 12, 2016 6:55 AM