Forum Support

Shape 5
March 28, 2024, 04:53:20 PM *
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: how to show thumbnails under iacf and how to show multiple iacf on the same page  (Read 516 times)
laurentp75
Jr. Member
**
Offline Offline

Posts: 61



« on: August 01, 2016, 02:39:54 AM »

Hello Shape5,

I have two problems,

I put ImageAndContentFader v4 on the custom_2 position like the demo with "Luxon" template and I want to show another (another  IACF module ) with others images, on another position like below_body, for example, but if I do that the two IACF stop working with a black background and no image.Possible to have 2 IACF on the same page ?
In another hand, I also  try showing thumbnails under the IACF (thumbnails like in general contractor) but there is not.I would like to have thumbnails carousel under IACF with Luxon template. the same as your image fader here  http://www.shape5.com/demo/maxed_mag/ it is to show rooms,  kitchen, view, etc.. of each appartment.

Thanks,
Regards,

Laurent
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: August 01, 2016, 07:12:40 AM »

Hello,

You cannot have two copies of the module on the same page or the javascript will conflict. You can have two copies of the module on the site on different pages, but not on the same.
Logged

Mike Knott
------------
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
laurentp75
Jr. Member
**
Offline Offline

Posts: 61



« Reply #2 on: August 01, 2016, 12:49:22 PM »

Hello Mikek thank you for your answer. That's ok for that.
ok if I publish on a another page and another position, how can I have thumbnails under IACF with luxon template,please ?
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: August 02, 2016, 07:22:15 AM »

Hello,

The Luxon design is not designed for thumbnails, that feature is rarely used in the templates. If you want to use it, you can enable it in the module's backend, but you'll need to modify the template's template.css file. Find this section:

/* IMAGE AND CONTENT FADER
----------------------------------------------------------- */


Delete everything in that section (Up until you see the Sidebar section of css). And then replace it with this:



/* IMAGE AND CONTENT FADER
----------------------------------------------------------- */

.withArrows a.open {
width:100% !important;
left:0 !important;
}

.slideInfoZone {
bottom:auto !important;
height:100% !important;
padding-left:0px !important;
padding-right:0px !important;
padding-bottom:0px !important;
background:none !important;
width:100% !important;
left:auto !important;
right:0px !important;
background:none !important;
}

.slideInfoZone br {
clear:both !important;
display:block;
}

.jdGallery .slideInfoZone h2 {
margin:0px !important;
margin-left:auto !important;
margin-right:auto !important;
padding:0px !important;
font-size:2.6em !important;
line-height:144% !important;
text-shadow:none !important;
font-weight:400 !important;
margin-bottom:0px !important;
display:block;
text-transform:none !important;
width:80% !important;
font-weight:800 !important;
margin-bottom:0px !important;
padding-bottom:8px !important;
}

.jdGallery .slideInfoZone p {
margin:0px !important;
margin-left:auto !important;
margin-right:auto !important;
display:block !important;
padding:0px !important;
color:#FFFFFF !important;
width:80% !important;
font-weight:bold;
font-size:1.45em;
text-shadow:none !important;
}

.slideInfoZone .readon {
margin:0px;
margin-top:48px;
text-decoration:none !important;
font-size:0.65em;
}

.jdGallery a.right, .jdGallery a.left {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
filter: alpha(opacity=100) !important;
-moz-opacity: 1 !important;
-khtml-opacity: 1 !important;
opacity: 1 !important;
width:60px !important;
height:47px !important;
float:left !important;
padding:0px !important;
top:16px !important;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
transition: all 300ms ease-out;
top:46% !important;
z-index:3 !important;
-moz-opacity:0 !important;
-khtml-opacity:0 !important;
opacity:0 !important;
}

.jdGallery a.right {
background:url(../images/s5_arrow_right.png) no-repeat top left !important;
left: auto !important;
right:1% !important;
}

.jdGallery a.right:hover {
background-position: 50% 100% !important;
-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
}

.jdGallery a.left {
background:url(../images/s5_arrow_left.png) no-repeat top right !important;
right:auto !important;
left:1% !important;
}

.jdGallery a.left:hover {
background-position: 50% 100% !important;
-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
}

.jdGallery .slideElement {
    background-size: cover !important;
}

.jdGallery .loadingElement {
background-image:none !important;
}      
   
.jdGallery a.open {
display:inline !important;
}

.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:left;
-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;
}
   
#s5_pos_custom_2:hover .jdGallery a.right, #s5_pos_custom_2:hover .jdGallery a.left {
-moz-opacity: 1 !important;
-khtml-opacity: 1 !important;
opacity:1 !important;
}
Logged

Mike Knott
------------
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
laurentp75
Jr. Member
**
Offline Offline

Posts: 61



« Reply #4 on: August 02, 2016, 09:06:25 AM »

Hello Mikek, thanks a lot.I will try this, perhaps with a page id before, in the css, not to delete everything.Thanks a lot for the time you spend for me, it's perfect.I will try as soon as possible.

Laurent,
Logged
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.