WordPress.org

Ready to get started?Download WordPress

Forums

Auto ThickBox Plus
[resolved] only the cover for a gallery ? (10 posts)

  1. Mediacleg
    Member
    Posted 2 years ago #

    Hello,

    Is it possible to include in a page only the cover for a gallery, and when clicked upon the cover, opens one by one, in a thickbox, the pictures inside this gallery ?

    In my situation, I want to have a page with a cover for each gallery i have but i don't find a solution...

    I want this :

    Cover opening gallery 1 / Cover opening gallery 2 / ...

    Thanks a lot !

    http://wordpress.org/extend/plugins/auto-thickbox-plus/

  2. attosoft
    Member
    Plugin Author

    Posted 2 years ago #

    I think the easiest way to show only a cover of gallery is using empty link tag that does not contain any texts and tags.

    <a href="cover.jpg" rel="gallery-id"><img src="cover-thumb.jpg" alt="Cover" /></a>
    <a href="page1.jpg" rel="gallery-id"></a>
    <a href="page2.jpg" rel="gallery-id"></a>
    <a href="page3.jpg" rel="gallery-id"></a>
    

    If you use [gallery] shortcode, you can hide images other than a cover with the following styles.

    <style type="text/css">
     dl.gallery-item { display: none; }
     dl.gallery-item:first-child { display: block; }
    </style>
    [gallery link="file"]
    

    You may use "columns/size" option to change cover style.
    ref. http://codex.wordpress.org/Gallery_Shortcode#Options

    Note: ":first-child" pseudo-class is supported on IE7 and Firefox3 or later.
    ref. https://developer.mozilla.org/en/CSS/%3Afirst-child#Browser_compatibility

  3. Mediacleg
    Member
    Posted 2 years ago #

    Thanks a lot for your answer.

    The second solution works well, but leaves blank lines above and under the cover, which don't appear in html code, i don't know how delete them ?

    For the first one, i don't understand very well how to use it, like that ?

    <img src="URLOFcover-thumb.jpg" alt="Cover" />

    ?

    Thanks again for your help

  4. Mediacleg
    Member
    Posted 2 years ago #

    <a href="urlofcover.jpg" rel="gallery id = xxx"><img src="urlofcover-thumb.jpg" alt="Cover" /></a>

    ?

  5. attosoft
    Member
    Plugin Author

    Posted 2 years ago #

    In first solution, you need to write empty link tags as below. These links are not displayed because they does not have any contents (i.e. texts and tags).

    <a href="page1.jpg" rel="gallery-id"></a>
    <a href="page2.jpg" rel="gallery-id"></a>
    <a href="page3.jpg" rel="gallery-id"></a>
    

    In second solution, add "div.gallery br { display: none; }" style to remove blank lines.

  6. Mediacleg
    Member
    Posted 2 years ago #

    Hello, thanks a lot, it works well, i put this code :

    <style type="text/css">
    dl.gallery-item { display: none; }
    dl.gallery-item:first-child { display: block; }
    [gallery id="123"]
    div.gallery br { display: none; }
    .entry-title {display:none;}
    </style>

    But blank spaces still remains, I don't know how to limit them :
    http://nsa29.casimages.com/img/2012/06/23/120623031509573941.jpg

    an idea ?

  7. attosoft
    Member
    Plugin Author

    Posted 2 years ago #

    Where are blank spaces? Are they four (top/bottom/left/right) spaces around the image?

    If you want to use larger image, use "size" option.

    You may use "columns/size" option to change cover style.
    ref. http://codex.wordpress.org/Gallery_Shortcode#Options

    And you should write [gallery] shortcode on the outside of <style> tag.

  8. Mediacleg
    Member
    Posted 2 years ago #

    I would like to reduce the blank spaces around the image yes, as u can see on the image, but i think i've to modify the file style.css of my template in fact (graphene).

    I don't think this is in relation with the plugin ?

  9. attosoft
    Member
    Plugin Author

    Posted 2 years ago #

    I installed Graphene theme. The blank spaces are margin/padding of the image? If so, you can remove the margin/padding with the following styles.

    <style type="text/css">
      dl.gallery-item {
        display: none;
        margin: 0 !important;
        width: 150px !important;
      }
      dl.gallery-item:first-child { display: block; }
      dt.gallery-icon { margin-top: 0; }
      img.attachment-thumbnail { margin: 0; }
      div.gallery br { display: none; }
    </style>
    

    In my opinion, this is a request on writing CSS if you use "thumbnail" image size.

  10. attosoft
    Member
    Plugin Author

    Posted 2 years ago #

    All the problems have been resolved by exchanging e-mails.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic