Is a slide-in effect for event details possible in the main list view?

Début
Précédent
1
Suivant
Fin

jonmar
Auteur du sujet
Membre junior

Plus d'informations

il y a 10 ans 2 semaines - il y a 10 ans 2 semaines #13143 par jonmar

Is a slide-in effect for event details possible in the main list view? a été créé par jonmar

Okay, I need to create a calendar theme that looks and works like this:

So the left side of the image is how the event would be displayed by default on the site. Only the event image is shown. Then when you move your mouse cursor over the event image, the event details slide in from the bottom, as shown on the right side of the image.

Is this possible? Do I need to do a lot of custom PHP to get it done, or are there some cool CSS tricks that I can use?

ic_rounded seems like a good starting point, as it already displays the event image automatically in the background of the event box. I would then just need to shape the box and make it larger, and then somehow implement the slide-in effect.

Thanks!

Dernière édition: il y a 10 ans 2 semaines par jonmar.

Connexion ou Créer un compte pour participer à la conversation.

jonmar
Auteur du sujet
Membre junior

Plus d'informations

il y a 10 ans 2 semaines #13144 par jonmar

Réponse de jonmar sur le sujet Is a slide-in effect for event details possible in the main list view?

Actually, I already found this. Makes me very optimistic that it can be done with iCagenda!

stackoverflow.com/questions/16989585/css...from-left-transition

Connexion ou Créer un compte pour participer à la conversation.

Lyr!C
Administrateur
Lead Developer

Plus d'informations

il y a 10 ans 2 semaines #13163 par Lyr!C

Réponse de Lyr!C sur le sujet Is a slide-in effect for event details possible in the main list view?

Hello,

What i would recommend :
- do first a HTML/css page to test your design for one event (using css3 or script). (eaiser first to create with no php data, but just inline content)
- When you will have one HTML structure ready for 1 event, you will be able to create a custom theme pack and then integrate your HTML in the YOURTHEME_events.php file
- You will just have after to replace "inline text/image" by php variables (this is where i will be able to help you, but you will fincd exemple with core theme pack ic_rounded ;-)

Note: i have already started to work on a similar design. No currently ready, and not enough time to finish it (only list view done) but when i will be able to work again on it, it will be a new theme pack for Pro versions of iCagenda ;-)

Best Regards,
Cyril

Latest version : iCagenda 4.0.16
We recommend every user to keep iCagenda updated.
Don't forget to have your Joomla!™ up-to-date!

Do you like iCagenda?
I would appreciate if you could take 5 minutes to post a review on JED (Joomla Extensions Directory) .

Connexion ou Créer un compte pour participer à la conversation.

jonmar
Auteur du sujet
Membre junior

Plus d'informations

il y a 10 ans 1 semaine - il y a 10 ans 1 semaine #13232 par jonmar

Réponse de jonmar sur le sujet Is a slide-in effect for event details possible in the main list view?

Hi!

I've made good progress with this. I have the slide effect working like I want it to. I have a few questions, though.

Can I control the quality of the thumbnail image that the calendar events list page loads as a bg image? My boxes are bigger than ic_rounced and the images are blurry as a result.

I'm using <?php echo $CATEGORY_COLOR; ?> to get the background color for the container that slides into view. Is there a way I can set opacity for the background color?

Thanks!

Dernière édition: il y a 10 ans 1 semaine par jonmar.

Connexion ou Créer un compte pour participer à la conversation.

Lyr!C
Administrateur
Lead Developer

Plus d'informations

il y a 10 ans 1 semaine #13242 par Lyr!C

Réponse de Lyr!C sur le sujet Is a slide-in effect for event details possible in the main list view?

Hi!

Can I control the quality of the thumbnail image that the calendar events list page loads as a bg image? My boxes are bigger than ic_rounced and the images are blurry as a result.

Yes, you can get the thubmnails as set in the global options of iCagenda component.

Maybe set just differently the size and quality i for the "medium" thumbnail size in global options > general settings, and then reload the page ;-)

I'm using <?php echo $CATEGORY_COLOR; ?> to get the background color for the container that slides into view. Is there a way I can set opacity for the background color?

Yes!

In the iC Library i've created for iCagenda, i have added a bunch of functions.
AS the color is saved in Hex format, we just need it to be converted to rgb (and then add the opacity).

Try this :

<?php echo 'rgba(' . iCColor::hex_to_rgb($CATEGORY_COLOR) . ', 0.5)'; ?>

Hope this helps ?

Regards,
Cyril

Connexion ou Créer un compte pour participer à la conversation.

jonmar
Auteur du sujet
Membre junior

Plus d'informations

il y a 10 ans 1 semaine #13244 par jonmar

Réponse de jonmar sur le sujet Is a slide-in effect for event details possible in the main list view?

Amazing, thank you!

That code worked perfectly. Exactly what I needed.

I wish you made slideshows and other extensions for Joomla. I'd buy all my stuff from you.

Les utilisateur(s) suivant ont remercié: Lyr!C

Connexion ou Créer un compte pour participer à la conversation.

Lyr!C
Administrateur
Lead Developer

Plus d'informations

il y a 10 ans 1 semaine #13262 par Lyr!C

Réponse de Lyr!C sur le sujet Is a slide-in effect for event details possible in the main list view?

You're welcome jonmar!

Yes, i would love to write other extensions (and i've got full of ideas) but for now, i prefer to focus on iCagenda (as i have already many things i want to do for this extension ;-)