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');
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
info@elgg.org
Security issues should be reported to security@elgg.org!
©2014 the Elgg Foundation
Elgg is a registered trademark of Thematic Networks.
Cover image by RaĆ¼l Utrera is used under Creative Commons license.
Icons by Flaticon and FontAwesome.
- iionly@iionly
iionly - 1 like
- vlad.vuk@vlatko.vukovic
vlad.vuk - 0 likes
- ihayredinov@ihayredinov
ihayredinov - 0 likes
- vlad.vuk@vlatko.vukovic
vlad.vuk - 0 likes
- ihayredinov@ihayredinov
ihayredinov - 0 likes
- vlad.vuk@vlatko.vukovic
vlad.vuk - 0 likes
- iionly@iionly
iionly - 0 likes
- ihayredinov@ihayredinov
ihayredinov - 0 likes
- vlad.vuk@vlatko.vukovic
vlad.vuk - 0 likes
- iionly@iionly
iionly - 0 likes
You must log in to post replies.Not tested the following code but it hopefully works.
Put jQuery-flexImages-master (maybe renamed to jQuery-flexImages) in
Then create the file
with the following content
Now you can add in the init function in start.php of your your_plugin
And in the file where you need the jQuery-flexImages code you need to add
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
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:
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)
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
in mod/your_plugin_name/views.php
add to the init function in start.php of your plugin the line
Then you can load the css code in the view where you need it with (this is php code)