Posted 11 months 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 !
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
Posted 11 months 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
Posted 11 months ago #
<a href="urlofcover.jpg" rel="gallery id = xxx"><img src="urlofcover-thumb.jpg" alt="Cover" /></a>
?
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.
Posted 11 months 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 ?
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.
Posted 11 months 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 ?
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.
All the problems have been resolved by exchanging e-mails.
You must log in to post.
