Shape 5

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/ (http://www.shape5.com/demo/maxed_mag/) it is to show rooms,  kitchen, view, etc.. of each appartment.

Thanks,
Regards,

Laurent

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.

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 ?

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;
}

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,