Nice module, gallerias look very well, but I have a few questions to the developer.

  • I'm not familiar with advanced CSS, so maybe someone guide me why jcarousel in my galleria looks so strange (pls look at the attachment). Thumbs are not square:-(
  • Another problem is: ok, with some help I will customize jcarousel css files for Galleria layout (I hope ), but this means I won't be able to use jcarousel in different content type (e.g. page or story), am I right?
  • And one more another question is: how to initially show only thumbs?
  • attached screen is from acqua marina theme and shows that thumbs have bullets (left top corner) from that theme - this should not happen, I suppose?
CommentFileSizeAuthor
#1 gallery_3.jpg27.04 KBcyc
#1 gallery_4.jpg26.3 KBcyc
#1 gallery_5.jpg22.84 KBcyc
galleria_thumbs.jpg37.46 KBcyc

Comments

cyc’s picture

cyc commented
StatusFileSize
new gallery_5.jpg22.84 KB
new gallery_4.jpg26.3 KB
new gallery_3.jpg27.04 KB

As to my 1st question: I've RTFM;-)
in Galleria jcarousel settings (Limit of visible thumbnails) I've had 10, and jcarousel tries to make room for 10 thumbs.. Anyway, it doesn't work exactly as described.
pls look at the attachements, made with different settings at "Limit of visible thumbnails" field. Number in filename is the current setting.

galleria_3.jpg - 2 first imgs are proportional, third is cropped
galleria_4.jpg - 3 imgs are showed, 4th missing
galleria_5.jpg - 4 imgs shown, 3 first proportional, 4th cut

and so on.. so it's a bug (in fact not very annoying;-)

So first question changes to:
Which css style should I change to have wide (e.g 500px) jcarousel?
(I've tried to change some styles, but the result was far from good)

Mark Theunissen’s picture

Mark Theunissen commented

Do you have Firebug installed? Use it to inspect the page and change the values dynamically, and you will be able to very quickly find the right style.

cyc’s picture

cyc commented

@Mark,

OK I've got those styles...

another questions remain open.

I think jcarousel included in gallery should have its own styles (re: my 2nd question above). All changes have to be made in native carousel style, so they have impact on all instances of jcarousel, not only that used in Galleria.

Mark Theunissen’s picture

Mark Theunissen commented

Great!

You will see that all the galleria content is inside a div called "galleria-content".

<div id="galleria-content"></div>

So if you want to style the jCarousel in a way that only affects the Galleria's jCarousel, you must adjust your CSS selectors to do this. E.g:

#galleria-content .jcarousel-main {
  width: 20px;
}

(that is a made-up example, but you get the point...)

cyc’s picture

cyc commented

@Mark

thank you. I'm not css developer, so such guides are priceless for me;-)

The next thing are those annoying green bullets (annoying only in galleria). here how code looks (pasted from Firebug window, come code was removed to clarify content). 

<div id="galleria-content">
  <div id="main-image" class="galleria_container">
      (... removed ...)
    <span class="caption" style="">blue blue</span>
  </div>
  <div class="item-list">
    <div class="jcarousel-skin-tango">
      <div class="jcarousel-container jcarousel-container-horizontal" style="display: block;">
        (.... removed ....)
        <div class="jcarousel-clip jcarousel-clip-horizontal">
          <ul class="gallery clear-block galleria-processed galleria jcarousel-processed jcarousel-list jcarousel-list-horizontal" style="width: 763px; left: 0pt;">
            <li class="active first jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="width: 79px;">
              (... removed ...)
            </li>
            <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" jcarouselindex="2" style="width: 79px;">
            </li>

If I add "background: none;" manually in each "li" after "width", bullets disappear. But if I add the the following in the jcarousel theme css:

#item-list .jcarousel-skin-tango .jcarousel-item-horizontal li {
  background: none;
}

bullets are still visible:-(

I suppose I do not fully understand the css precedence. Or it's impossible to set - how do you think?

Mark Theunissen’s picture

Mark Theunissen commented

Your CSS is wrong... I will help you this time, but it would be great if you could get a book on CSS and learn it properly! ;)

1. item-list is a class, so it needs a period not a hash sign (which is for ids).
2. the li element has the class jcarousel-item-horizontal, so your selector is in the wrong order.

.item-list .jcarousel-skin-tango li.jcarousel-item-horizontal {
  background: none;
}

I am happy to help with any other Galleria related queries, but please don't ask any more CSS until you've studied the subject a bit. Thanks! :)

cyc’s picture

cyc commented

@Mark

thank you for answer.
my stupid mistake with this hash - I shouldn't make this, I'm not completely green...

unfortunately, there's someting more missing - after correcting, bullets are still visible:-(
but following your advice I will try to find solution myself - I'll publish it here (I hope so)

as to my last open question (however it's not related to jcarousel, but strictly with galleria):
is it possible to initially hide first image and show only thumbs, and of course show full picture after click?

Mark Theunissen’s picture

Mark Theunissen commented

Hmm, I'm not sure about that, you can try using jQuery.

The only other thing that could be going wrong with your code above (the CSS), is that maybe there is some jQuery that's running and altering the properties that you are setting in the CSS. If so, experiment with the !important directive and try look for a workaround. Or write your own jQuery that runs after jCarousel's jQuery.... I can't really help much more than that I'm afraid.

coxw’s picture

coxw commented 
#galleria-content .jcarousel-item-horizontal li {
  background: none;
}

Give that a shot. Note the ID's are unique on a page, and there will only be one of them. Take advantage of the id's when you can, as it handles a lot of precedence issues. You can also read up on !important features in css as mentioned. They will transcend properties to all sub properties. For instance, #galleria-content li !important may actually work. You have to play around with it..... The only way to learn CSS is to dig right in.

cyc’s picture

cyc commented
Status: Active » Fixed

@lazycatch:

thank you for pointing, this works:

#galleria-content li.jcarousel-item-horizontal {
  background: none !important;
}

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.