Please make sure that you have read the documentation and extensive resources provided on this site before posting your question!
Dynamic Content Gallery Resources
DCG Version 4.0 beta is now available for download and testing. This is a development version and not recommended for live sites. Read more here.
Note that the current stable release of the DCG is version 3.3.5.
Log In
Register
Home
Topic RSS
open
11:56 pm
First and foremost: this plugin is solid, definitely the most solid of all the rotators out there. I've done some heavy CSS and customizing, and played in the dcfg-jq-script.js file a bit trying to achieve the look / functionality I'd like. Alas, I've run into a bit of a wall. Was wondering about a couple things:
1) I would like to have the 'active' thumbnail to appear with 100% opacity, but can't seem to figure out how to make this happen. I've attempted to manipulate the code between lines 160 – 170, and have been able to change the active thumbnails border color, but not the opacity. Any advice here would be phenomenal. See code below:
if (this.options.showInfopane) {
_T.height.set(this.r, 1, this.options.infoSpeed / 2, -1)
}
this.i = document.createElement('img');
this.i.style.opacity = 0;
this.i.style.filter = 'alpha(opacity=0)';
this.i.onload = new Function(this.n + '.le(' + s + ',' + c + ')');
this.i.src = this.a[s].p;
if (this.options.showCarousel) {
var a = $(this.p).find('img'),
l = a.length,
x = 0;
for (x; x < l; x++) {
a.get(x).style.borderColor = x != s ? '' : this.options.borderActive = '#00817B';
a.get(x).style.borderLeft = 'none';
a.get(x).style.borderTop = 'none';
a.get(x).style.borderRight = 'none';
a.get(x).style.borderWidth = '3px';
}
}
},
2) I might recommend in the next release creating an "active" class for both the active thumbnail and slide during the slideshow. This class will give we designers a little more control over the look and feel of the rotator.
You can see my progress here: fieldsmfg.info
2:51 pm
Hey there!!!
just checked your site. Thats awesome what you've customized in the plugin. Cool.
I'm also searching for some easy tips to customize the thumbnail carousel. I'm not a tech savvy in terms of codings but I know some basics of CSS. Perhaps you can guide me where could I find css for thumbnail carousel and how to add borders, change opacit for thumbnails and also I'd love to permanently show thumbnails at the bottom just like you did. Sorry, that i am asking for help since you too seeking for help.
This is out of topic but I liked the tabbed segment on your webpage featuring what's new, specials,…..best sellers. looks too good to be true. Did you use any plugin for that? or…??
11:41 am
August 25, 2008
Offline
@ digitalcanopy,
Glad you like the plugin, and thanks for the suggestions. 
Can you explain what you mean by "active" in the context of the thumbs? Do you mean you would like to have an active class dynamically added to the thumb on mouseover?
Dynamic Content Gallery: Have you read the 4:57 pm
@Ade
Can you explain what you mean by "active" in the context of the thumbs? Do you mean you would like to have an active class dynamically added to the thumb on mouseover?
Sorry if I wasn't clear. What I mean is that it would be nice if an "active" class is added to both the thumbnail 'img' (within 'dcfg-thumbnails'), and the 'img' that appears in the rotator (i.e. 'dfcg-image'). Maybe this code example below will help clarify (notice that I added the class "dcfg-active" to the image in "dfcg-image", and the thumbnail image in "dfcg-thumbnails" that corresponds with that image; in this case "Trade-Show.jpg").
<div class="dfcg-sliderContainer">
<div id="dfcg-slidearea">
<div id="dfcg-slider" style="white-space: nowrap; padding-right: 0px; left: 0px;">
<img width="100" height="39" title="Trade-Shows" alt="Join Fields for a show in your area!" class="dfcg-active dfcg-postthumb-auto thumbnail wp-post-image" src="<a href="<a href="http://fieldsmfg.info/wp-content/uploads/2010/12/T….." rel="nofollow" target="_blank">http://fieldsmfg.info/wp-content/uploads/2010/12/T…..a>; rel="nofollow" target="_blank"><a href="http://fieldsmfg.info/wp-content/uploads/2010/12/T….." rel="nofollow" target="_blank">http://fieldsmfg.info/wp-content/uploads/2010/12/T…..a>; style="margin-right: 5px; opacity: 0.3; border-left: 3px none; border-width: 3px; border-top: 3px none; border-right: 3px none;">
<img width="100" height="39" title="Lanyards" alt="Lanyards: 13 Styles Available with 24-Hour Rush at No Additional Charge" class="dfcg-postthumb-auto thumbnail wp-post-image" src="<a href="<a href="http://fieldsmfg.info/wp-content/uploads/2010/12/L….." rel="nofollow" target="_blank">http://fieldsmfg.info/wp-content/uploads/2010/12/L…..a>; rel="nofollow" target="_blank"><a href="http://fieldsmfg.info/wp-content/uploads/2010/12/L….." rel="nofollow" target="_blank">http://fieldsmfg.info/wp-content/uploads/2010/12/L…..a>; style="margin-right: 5px; opacity: 0.3; border-left: 3px none; border-width: 3px; border-top: 3px none; border-right: 3px none; border-color: -moz-use-text-color -moz-use-text-color rgb(0, 129, 123);">
</div>
</div>
<div id="dfcg-sliderInfo">Join Fields for a show in your area!</div>
</div><!– End #dfcg-sliderContainer –>
<a title="Pictures" class="dfcg-carouselBtn" id="dfcg-openGallery">Featured Articles</a>
</div>
Hopefully this helps clarify. In the mean time, do you have any suggestions how I can achieve the effect I mentioned above? Basically, I just want the thumbnail that currently appears with the bottom green border to also appear 100% opaque.
Thanks Ade!
Most Users Ever Online: 28
Currently Online:
15 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
johnbroome: 13
sjpeaches: 12
speedyp: 12
CherylMcL: 10
littlemerry: 8
lsnoei: 8
Member Stats:
Guest Posters: 770
Members: 1297
Moderators: 0
Admins: 1
Forum Stats:
Groups: 2
Forums: 7
Topics: 978
Posts: 4293
Newest Members: chargers3, jwhetstone, robert, Mak-Donuts, kilerb, Marian Bamboi
Moderators:
Administrators: Ade (2490)
