Main menu

Forum


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

  • jonmar
  • Auteur du sujet
  • Membre junior
  • Membre junior
Plus d'informations
il y a 8 ans 4 semaines - il y a 8 ans 4 semaines #13143 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!
Pièces jointes :
Dernière édition: il y a 8 ans 4 semaines par jonmar.

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

  • jonmar
  • Auteur du sujet
  • Membre junior
  • Membre junior
Plus d'informations
il y a 8 ans 4 semaines #13144 par jonmar
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
  • Portrait de Lyr!C
  • Administrateur
  • Administrateur
  • Lead Developer
Plus d'informations
il y a 8 ans 3 semaines #13163 par Lyr!C
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.6
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) .

Fichier attaché :

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

  • jonmar
  • Auteur du sujet
  • Membre junior
  • Membre junior
Plus d'informations
il y a 8 ans 2 semaines - il y a 8 ans 2 semaines #13232 par jonmar
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 8 ans 2 semaines par jonmar.

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

  • Lyr!C
  • Portrait de Lyr!C
  • Administrateur
  • Administrateur
  • Lead Developer
Plus d'informations
il y a 8 ans 2 semaines #13242 par Lyr!C
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

Latest version : iCagenda 3.9.6
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) .

Fichier attaché :

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

  • jonmar
  • Auteur du sujet
  • Membre junior
  • Membre junior
Plus d'informations
il y a 8 ans 2 semaines #13244 par jonmar
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
  • Portrait de Lyr!C
  • Administrateur
  • Administrateur
  • Lead Developer
Plus d'informations
il y a 8 ans 2 semaines #13262 par Lyr!C
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 ;-) )

Best Regards,
Cyril

Latest version : iCagenda 3.9.6
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) .

Fichier attaché :

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

Temps de génération de la page : 0.284 secondes

 

Follow Us

Créez vos templates Joomla avec Template Creator CK

acymailing logo new