Hello!
Within the Team Carousel, we want to incorporate GIFs for each member's photo but multiple GIFs playing all at once is a bit overwhelming, so we want to do either a rollover/hover/onclick to start the GIF. I have a preview image and the GIF uploaded to Media folder.
I am able to do it outside of the carousel tags, within a div tag id labeled "hoverlink", but I'd like to keep it within the carousel shortcode for consistency. Also noticed in the div tag, I can use vs in the carousel tag, it's image_url. I tested changing image_url to img_src, but the default gray box appears.
Any suggestions or direction you could steer me in?
Thank you!
Ali
image_url is just what I called the parameter of the src, it's going to still do the same thing. However, the thing that's stopping you is the fact you can't add an ID onto the image for your hover event. You'll have to open the shortcode-processing.php file located in the nectar/tinymce/ directory and edit the shortcode function to allow that parameter and process it on the img tag itself.
I have tried to figure this out in the Team Member shortcode area, trying to extend the shortcode to support a 2nd image and haven't been able to get it to work, but would like to try to get it done with your help if possible.
Over the past few days, I've read through some of the support tickets referencing the hover/rollover effect, saw your resource link for desaturated portfolio images, read most help requests that use CSS opacity instead and tried the "Hover Image" plug in but wasn't sure how to use within the shortcode. I've done some reading on shortcodes writing + editing, changed the "hoverlink" to a class tag within the JS file I made for the rollover feature, tried referencing other themes that use the hover effect in their shortcode and no luck, don't know where to go next.
I can start from scratch, remove the JS file I used to reference "hoverlink", just need guidance incorporating the 2nd image source into the shortcode for Team Members.
I understand if this may require more time than you have, but would like to hear your feedback before trying to find outside help.
essentially one way to do it would be adding a new parameter in the shortcode for example "hover_image" and and add the entered value of that onto the image tag in the processing like:
data-hover-src="the entered hover src here"
and finally create a quick javascript event in the init.js to loop through all team member elements and set a hover event to swap the standard image src with the one listed in the data-hover-src attribute.
Is it possible to "extend" the Visual Composer using a child theme instead of editing the source?
I created the edits for team member gifs and reflected the changes in the VC popup but I really don't want the source files to be edited in case there is a update to the files...
If Ali G still wants these changes I could provide the code I used to create this feature...
Hey Ali!
image_url is just what I called the parameter of the src, it's going to still do the same thing. However, the thing that's stopping you is the fact you can't add an ID onto the image for your hover event. You'll have to open the shortcode-processing.php file located in the nectar/tinymce/ directory and edit the shortcode function to allow that parameter and process it on the img tag itself.
Cheers :)
Hey there,
I have tried to figure this out in the Team Member shortcode area, trying to extend the shortcode to support a 2nd image and haven't been able to get it to work, but would like to try to get it done with your help if possible.
Over the past few days, I've read through some of the support tickets referencing the hover/rollover effect, saw your resource link for desaturated portfolio images, read most help requests that use CSS opacity instead and tried the "Hover Image" plug in but wasn't sure how to use within the shortcode. I've done some reading on shortcodes writing + editing, changed the "hoverlink" to a class tag within the JS file I made for the rollover feature, tried referencing other themes that use the hover effect in their shortcode and no luck, don't know where to go next.
I can start from scratch, remove the JS file I used to reference "hoverlink", just need guidance incorporating the 2nd image source into the shortcode for Team Members.
I understand if this may require more time than you have, but would like to hear your feedback before trying to find outside help.
Thanks again.
Ali
essentially one way to do it would be adding a new parameter in the shortcode for example "hover_image" and and add the entered value of that onto the image tag in the processing like:
data-hover-src="the entered hover src here"
and finally create a quick javascript event in the init.js to loop through all team member elements and set a hover event to swap the standard image src with the one listed in the data-hover-src attribute.
Cheers :)
Is it possible to "extend" the Visual Composer using a child theme instead of editing the source?
I created the edits for team member gifs and reflected the changes in the VC popup but I really don't want the source files to be edited in case there is a update to the files...
If Ali G still wants these changes I could provide the code I used to create this feature...