Support

    You are here:  
  1. Home
  2. Support
  3. General
  4. Listings
Toggle Submenu
  1. Forums
  2. Recent
  3. Categories
  4. Tags
  5. Users
  6. Badges
Support is currently Online
Add a reply View Replies (6)

Resolved Easyprofile users list module with slider/carousel option/view?

  1. blocdaddy
    blocdaddy
  2. General
  3. Friday, April 05 2019, 01:31 AM
I am using the Easyprofile users list module in a couple of different ways on my homepage http://www.premierlawyers.org. One version of the module (under the header "Featured Members";) is set to display only the users in a certain usergroup, from newest to oldest (and the other module is set to list all members in every usergroup from newest to oldest). I know that through the module settings I can limit the number of users, columns, profile info etc., that is shown in the front end of the modules and I have done this for both. However for the module which I have set to only show only one usergroup ("Featured Members";), I would like to be able to show on my homepage all of the users that could possibly be shown. The problem is that by doing so, it takes up most of my homepage as it shows in the front end as a list/column. Is there anyway to show the modules in a slider type of format where the featured members would be displayed as scrolling along one line of the page like a slider or carousel view rather than a normal list/column like now? Is this an option anywhere? If not, is there any code which could be added which would make this possible? Is this something you could add if it isn't already a feature?
Responses (6)
admin
admin Accepted Answer
Admin
Hi,
sorry for late reply, it's a weekend :D

Normally all templates allow you to add custom Javascript code with 2 ways:
1) In Template parameters (Extensions->Templates->Styles)
2) In specific custom files, for example creating a new file like /templates/theme-folder/js/custom.js

About your template you can follow docs at http://documentation.aplikko.com/flex/#Custom_Code_Settings, in parameter called "Before /head" add following code:
<script>jQuery(document).ready(function(){

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').hide(); 

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().show().addClass('jsn-active'); 



	setInterval(function(){ 

		if(jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').is(':last-child')) {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').hide().removeClass('jsn-active');

			jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().fadeIn().addClass('jsn-active');

		}

		else {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').removeClass('jsn-active').hide().next().fadeIn().addClass('jsn-active');

		}

	}, 3000);

});</script>
  1. more than a month ago
  2. General
  3. # 1
admin
admin Accepted Answer
Admin
Hi,
this is not possible natively, anyway you can do this by adding a bit of javascript like this:


jQuery(document).ready(function(){

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').hide(); 

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().show().addClass('jsn-active'); 



	setInterval(function(){ 

		if(jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').is(':last-child')) {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').hide().removeClass('jsn-active');

			jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().fadeIn().addClass('jsn-active');

		}

		else {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').removeClass('jsn-active').hide().next().fadeIn().addClass('jsn-active');

		}

	}, 3000);

});


In my example every 3 seconds (3000 milliseconds) the view change to another row.
  1. more than a month ago
  2. General
  3. # 2
blocdaddy
blocdaddy Accepted Answer
Awesome - thanks for the quick response! I am only a beginner coder...where would I insert your sample code?
  1. more than a month ago
  2. General
  3. # 3
blocdaddy
blocdaddy Accepted Answer
Wow, thanks for answering on a weekend! I wasn't expecting a response. I'll insert the code and see if it works. Thanks again for the quick responses and really great help!!
  1. more than a month ago
  2. General
  3. # 4
blocdaddy
blocdaddy Accepted Answer
I just tried the code and it works great! I had one other quick question...is there any way to slow down the actual transition effect between views so it's more of a fade in and out effect? Thanks so much for your help. Your software and support are really great!
  1. more than a month ago
  2. General
  3. # 5
admin
admin Accepted Answer
Admin
Hi,
please try to replace the previous code with this:
<script>jQuery(document).ready(function(){

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').hide(); 

	jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().fadeIn(2000).addClass('jsn-active'); 



	setInterval(function(){ 

		if(jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').is(':last-child')) {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').fadeOut(2000 , function(){

				jQuery('#sppb-addon-1553937077636 .jsn-l-row').first().fadeIn(2000).addClass('jsn-active');

			}).removeClass('jsn-active');

			

		}

		else {

			jQuery('#sppb-addon-1553937077636 .jsn-l-row.jsn-active').removeClass('jsn-active').hide().next().fadeIn(2000).addClass('jsn-active');

		}

	}, 5000);

});</script>


2000 are milliseconds of the transition time
5000 are milliseconds of switch between slides

NOTE: if you set 2000 to transition time then it mean 2 seconds for fadeOut and 2 seconds for fadeIn, so total transition time will be 4 seconds (4000ms). With 4000ms of transition time then the time to switch between slides must be great than 4000ms, so something like 5000ms is good
  1. more than a month ago
  2. General
  3. # 6
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Request Support

Support is currently Online
Ask a Question
Official support hours:
Monday To Friday except Saturday and Sunday
From 09:30 To 17:00

Support Availability

Working days: Monday to Friday. The support staff is not available on weekends; in the most of cases tickets will not be answered during that time.

Reply time: Depending on the complexity of your support issue it's usually between a few minutes and 24 hours for paid members and about one week for free members. When we expect longer delays we will notify you.

Guidelines

Before you post: read the documentation and search the forums for an answer to your question.

When you post: include Site Details if you request a support (you can use the form below the reply in Site Details tab).

Auto Solved Question: If after a week the author of the post does not reply to a request by moderator, the question will be marked as resolved.

Language: only English

Search Users

Easy Profile® is not affiliated with or endorsed by Open Source Matters or the Joomla Project. Joomla is Free Software released under the GNU/GPL License.

We use a few cookies

Our site uses non fat, delicious cookies which help us improve your user experience. You can read more about it in our Legal page.