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

Inizio
Indietro
1
Avanti
Fine

jonmar
Autore della discussione
Junior Member

Di più

8 Anni 2 Mesi fa - 8 Anni 2 Mesi fa #13143 da jonmar

Is a slide-in effect for event details possible in the main list view? è stato creato da 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!

Ultima Modifica 8 Anni 2 Mesi fa da jonmar.

Si prega Accedi o Crea un account a partecipare alla conversazione.

jonmar
Autore della discussione
Junior Member

Di più

8 Anni 2 Mesi fa #13144 da jonmar

Risposta da jonmar al topic 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

Si prega Accedi o Crea un account a partecipare alla conversazione.

Lyr!C
Administrator
Lead Developer

Di più

8 Anni 2 Mesi fa #13163 da Lyr!C

Risposta da Lyr!C al topic 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 3.9.7
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) .

Si prega Accedi o Crea un account a partecipare alla conversazione.

jonmar
Autore della discussione
Junior Member

Di più

8 Anni 2 Mesi fa - 8 Anni 2 Mesi fa #13232 da jonmar

Risposta da jonmar al topic 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!

Ultima Modifica 8 Anni 2 Mesi fa da jonmar.

Si prega Accedi o Crea un account a partecipare alla conversazione.

Lyr!C
Administrator
Lead Developer

Di più

8 Anni 2 Mesi fa #13242 da Lyr!C

Risposta da Lyr!C al topic 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

Si prega Accedi o Crea un account a partecipare alla conversazione.

jonmar
Autore della discussione
Junior Member

Di più

8 Anni 2 Mesi fa #13244 da jonmar

Risposta da jonmar al topic 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.

Ringraziano per il messaggio: Lyr!C

Si prega Accedi o Crea un account a partecipare alla conversazione.

Lyr!C
Administrator
Lead Developer

Di più

8 Anni 2 Mesi fa #13262 da Lyr!C

Risposta da Lyr!C al topic 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 ;-)