Forum Support

Shape 5
March 29, 2024, 04:29:23 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: S5 Image and Content Fader v3  (Read 616 times)
hollynwood
Jr. Member
**
Offline Offline

Posts: 24



« on: April 29, 2015, 04:26:25 PM »

I've created a new slider with your plugin (Excuse me but I've been working a lot in WP) extension.  The problem is that it has a semitransparent layer that comes over the image.  How do I control that?  The way it works is the slide comes up with nothing over it and then a second or so that layer comes over and then the text.  That stays that way until the slide changes. 

Id prefer to have it load with the text and semitransparent layer and have that go away (face out) to see the background image clearly.  Then switch to the new image same way, text and layer that fades to just the bg image.  Next slide...

Here is the page http://www.fha203kfl.com/index.php/examples
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: April 30, 2015, 07:57:13 PM »

Hello,

You can modify the Image and Content Fader settings for this via the Module Settings. The way the module works is the image loads and then the slide info zone loads after that with your text / image headings.

Just ensure you have at least 2 images and give both images <p> and <h3> text in the back end. You can also control the opacity of the container via the module settings. Be sure that you are using the Jquery animation library and not the S5 Effects library as well.

This thread might also be helpful:

http://www.shape5.com/component/option,com_smf/Itemid,75/topic,39638.0/
« Last Edit: April 30, 2015, 08:15:07 PM by mikenicoll » Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
hollynwood
Jr. Member
**
Offline Offline

Posts: 24



« Reply #2 on: May 04, 2015, 07:57:01 PM »

I need to know WHERE in the module setting I change this stuff.  I've been through it a hundred times changing this and that and none of it does what I expect.  Can you be less vague?

"You can also control the opacity of the container via the module settings."  Where bro???  Where?  Dont' just say the module settings either.

I open the module and there is "Module" that starts off with Pre-text that goes in above the slider. and so on.  Then "Menu Assignment" and then "Permissions" nothing there is intuitive to me that is telling me how and when to time that opacity and transparency. 
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: May 05, 2015, 03:52:19 PM »

Hello,

The text area of the extension requires a delay since javascript is aligning the text on the right hand side of the image. If there wasn't a delay the javascript wouldn't have enough time to load when the page is refreshed. There is also a behind the scenes class change that goes on page load so the text isn't visible before it has time to be relocated by the javascript on the right hand side and fade in.

You can see in the Template.CSS file an example of this here:

Code:
Template.CSS - Line 1607

.slideInfoZone {
-webkit-transition: opacity 400ms ease-out;
-moz-transition: opacity 400ms ease-out;
-o-transition: opacity 400ms ease-out;
transition: opacity 400ms ease-out;
text-align:center;
-moz-opacity: 0 !important;
-khtml-opacity: 0 !important;
filter:alpha(opacity=0) !important;
opacity:0 !important;
}

.slideInfoZone_load {
-moz-opacity: 1 !important;
-khtml-opacity: 1 !important;
filter:alpha(opacity=100) !important;
opacity:1 !important;
}

The animation effect is around 400ms where it causes the area to "ease-in". I spoke with the designer for this theme and the delay has to be there for the text alignment so you don't see the text snap into place. You may be able to adjust the "ms" of the effect in the CSS to be a bit faster than 400ms but your results may vary based on your site speed.
« Last Edit: May 05, 2015, 03:54:31 PM by mikenicoll » Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
hollynwood
Jr. Member
**
Offline Offline

Posts: 24



« Reply #4 on: May 06, 2015, 08:17:39 PM »

Let me ask you simply.  Are there settings in the model where I can time the overlay?  Where I can time the words coming in for all this in a UI without needing to code?  Like in Front Page SS.  How things can be orchestrated?  Or is this just a "dumb" slider with no controls?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: May 07, 2015, 10:32:36 PM »

Hello,

We only have the following settings built into the module settings themselves, the rest would need to be controlled via the script/css files. There would be way to many functions for a GUI if we added them all.

Opacity Time = The amount of time each slide will take to transition for 0% to 100% opacity
Visible Time = Time each slide will show for before transitioning
Hide Time = Amount of time slide takes to transition out before next slide appears

As stated though this Template requires a delay override in the files for the text to not be visible when snapping into place.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
hollynwood
Jr. Member
**
Offline Offline

Posts: 24



« Reply #6 on: May 13, 2015, 07:25:31 PM »

I was referring to things like FrontPageSlideShow in Joomal or RevolutionSlider for WordPress that have gobs of functionality built in.  If I get it then yours just isn't one of them.  To do what I want I guess I need something else.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: May 15, 2015, 09:30:40 PM »

Hello,

If you don't like the Image and Content Fader you can use another slider of your choosing in one of the Framework positions. We find that the features provided by the Image and Content Fader are suitable for the vast majority of our users but also understand that certain sites require a bit more complexity and features for a top slider. If you have any ideas for the Image and Content Fader feature wise please feel free to voice them in our Suggestions forum.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.