flexImages, gmaps working in elgg 1.9 but not working in elgg 2.3 - recipe help needed.

Can someone explain in simple, clear steps what is needed to be done to get flexImages ( https://goodies.pixabay.com/jquery/flex-images/demo.html ) working in Elgg 2.3

I have flexImages working in Elgg 1.9 (and I am using inline script, which is not allowed anymore).

In my (my_site) plugin's start.php init function I have:

elgg_register_js('fleximages', array('src' => "mod/my_site/views/default/forms/my_site/jQuery-flexImages-master/jquery.flex-images.js")); 

elgg_load_js('fleximages');

In "...\mod\my_site\views\default\forms\my_site\world_slick.php" I have:

...

<?php     

elgg_require_js("my_site/filter_sites");

elgg_require_js('my_site/fleximages');     

?>

...

<head>

    <link rel="stylesheet" href="<?php echo elgg_get_site_url() . "mod/my_site/views/default/forms/my_site/jQuery-flexImages-master/jquery.flex-images.css"?>">

</head>
  
<!--script src="<?php echo elgg_get_site_url() . "mod/my_site/views/default/forms/my_site/jQuery-flexImages-master/jquery.flex-images.js"?>"></script -->

<script> $('#demo1').flexImages({rowHeight: 220});  </script>

<div style=" margin: auto;">
    <div id="demo1" class="flex-images"> 
    </div>
</div>     

...

Whatever I tried to make it works in elgg 2.3 is unsuccessful.

Within the same plugin/files I have similar issue with making gmaps upgrade from 1.9 to 2.3 working as well. In start.php ini function I have:

    elgg_register_js('maps', '//maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&#39;);
    elgg_load_js('maps');

 

 - and in world_slick.php I have only:

<div  id="map" style="width: 100%; height: 500px;"></div>

.

 

In filter_sites.js I have functions for customization of gmap and flexImages filling with filtered images...

As it works in elgg 1.9 I assume it has to be some commands as principle improvement.

I read help but it is not a cookbook for me to do it myself so I ask you here to help me.

 

I am not an expert for AMD or advanced jquery concepts so please explain it as a recipe for future 3rd party jquery plugins including as well.

Regards,

Vlad

 

 

 

  • Not tested the following code but it hopefully works.

    Put jQuery-flexImages-master (maybe renamed to jQuery-flexImages) in

    /mod/your_plugin/vendors/jQuery-flexImages

    Then create the file

    /mod/your_plugin/views.php

    with the following content

    <?php
    
    return [
        'default' => [
            'jquery.flex-images.js' => __DIR__ . '/vendors/jQuery-flexImages/jquery.flex-images.min.js',
            'jQuery-flexImages/' => __DIR__ . '/vendors/jQuery-flexImages/',
        ],
    ];


    Now you can add in the init function in start.php of your your_plugin

    elgg_define_js('jquery.flex-images', [
        'deps' => ['jquery'],
        'exports' => 'jQuery.fn.flexImages',
    ]);

    And in the file where you need the jQuery-flexImages code you need to add

    elgg_require_js('jquery.flex-images');

     

    For the google maps API I can't help you. The Event Manager plugin (available also for Elgg 2) has Google Maps support. I would suggest to study the code of this plugin to figure out what you might need to change to get your 1.9 code to work on Elgg 2. The Event Manager version available at https://elgg.org/plugins/736695 might not be the most current version though. Maybe for Elgg 2.3 it's better to get the more recent version at https://github.com/ColdTrick/event_manager/releases.

  • Thank you iionly.

    I did what you wrote but still it is not working.

    I am calling it with:

    <script> $('#demo1').flexImages({rowHeight: 220});  </script>

     

    and receive message: Uncaught TypeError: $(...).flexImages is not a function

    #demo1 is defined in the same php file as:

        <div id="demo1" class="flex-images"> </div>

    and class "flex-images" is defined in <head> tag of the same php file as written above (in my 1st post).

    What should I do further?

    Regards,

    Vlad

     

  • <script>
    require(['jquery', 'jquery.flex-images'], function($) {
        $('#demo1').flexImages({rowHeight: 220});
    });
    </script>
    

    You need to async module you registered. It's not loaded when you call your inline script.

  • Thank you Ismayil.

    I have progress but it is still not working.

    The error message I receive now is following (when doing inspect in Chrome):

    /cache/0/default/jquery.flex-images.js:3

    Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
        at HTMLDivElement.<anonymous> (/cache/0/default/jquery.flex-images.js:3)
        at Function.each (jquery.js:2)
        at n.fn.init.each (jquery.js:2)
        at n.fn.init.t.fn.flexImages (/cache/0/default/jquery.flex-images.js:3)
        at all:110
        at Object.execCb (require.js:1693)
        at Module.check (require.js:881)
        at Module.<anonymous> (require.js:1136)
        at require.js:134
        at require.js:1186

    Do you know what is needed to be done?

    Vlad

     

  • Make sure #demo1 exists on the page. You can also try adding elgg/ready dependency:

    <script>
    require(['jquery', 'jquery.flex-images', 'elgg/ready'], function($) {
        $('#demo1').flexImages({rowHeight: 220});
    });
    </script>
  •  

    The error message is the same after I added elgg/ready as you suggested..

    There is demo1 on the page, I see it in inspect element and it is defined on the page through:

    <div style=" margin: auto;">
        <div id="demo1" class="flex-images">
        </div>
    </div>    

    Is it possible that css class "flex-images" is missing ?

    My original code had following flex-images.css definition:

    <!-- head>

        <link rel="stylesheet" href="<?php echo elgg_get_site_url() . "mod/my_site/views/default/forms/my_site/jQuery-flexImages-master/jquery.flex-images.css"?>">

    </head -->

    Original jquery.flex-images module has two files:

     - jquery.flex-images.css

     - jquery.flex-images.js

     

     

    Should that jquery.flex-images.css be included into my plugin on some new way as well ?

     

    Vlad

  • Regarding the loading of the JS lib there are two possibilities. In the init function of start.php you have "defined" the module. You can also define dependencies in the elgg_define_js() call ("deps" attribute). But then you need to load the module where necessary. One possibility would be loading it in php code as I described in my last posting. The other possibility is within JS code (either within <script> or within another AMD module). Maybe within <script> will do for a start.

    Loading the CSS stuff is also necessary. I missed that you had this in your code example. It should work like this (if you have added the views.php as I described in my last post)

    <?php
    
    elgg_require_css('jQuery-flexImages/jquery.flex-images');
    
    ?>
    
    <script>
    require(['jquery', 'jquery.flex-images'], function($) {
        $('#demo1').flexImages({rowHeight: 220});
    });
    </script>
    
    
  • It's possible that CSS is needed, jquery can be weird that way. You can either register your CSS and load where needed, or just extend core CSS.

  • iionly when I enter elgg_require_css command the system returns error message: 

    Call to undefined function elgg_require_css()

    There is no such function in elgg 2.2 or 2.3 reference or on elgg 2.3 learn pages.

    I use elgg 2.3.

    Shoudn't I register css file in start.php of my plugin and then call elgg_load_css on the php page where it is needed?

    What is good solution?

     

     

     

     

     

     

     

  • Sorry. My mistake. It won't work at like I described yesterday.

    Assuming the css file is at mod/your_plugin_name/vendors/jQuery-flexImages/jquery.flex-images.css

    and you have the line

    'jQuery-flexImages/' => __DIR__ . '/vendors/jQuery-flexImages/',

    in mod/your_plugin_name/views.php

    add to the init function in start.php of your plugin the line

    elgg_register_css('jquery.flex-images-css', elgg_get_simplecache_url('jQuery-flexImages/jquery.flex-images.css'));

    Then you can load the css code in the view where you need it with (this is php code)

    elgg_load_css('jquery.flex-images-css');
Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking