CODEWITHSUNDEEP
photoswipe
balaclava nine
balaclava nine

Reputation: 1

Modifying PhotoSwipe 4 Caption Font

Is there a way to modify the caption font and size in PhotoSwipe 4?

I looked through the CSS with no luck. I also tried a span tag with no luck. And I looked through the javascript as well.

Upvotes: 0

Views: 559

Answers (1)

moderntimes
moderntimes

Reputation: 389

I would leave the default.css alone and in place.

Then in your own stylesheet you add the styling for the font of the caption.

Why?
See if the default.css is updated you need to change it again, if you separate your styling from the default.css file you avoid having to tamper with it later on when it is updated.

Looking at the markup from this CodePen http://codepen.io/dimsemenov/pen/ZYbPJM you can do the following:

HTML

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="img/dektop/1.jpg" itemprop="contentUrl" data-size="1200x1202">
            <img src="img/thumb/1.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
            <figcaption itemprop="caption img-description">
            <div class="index">
                <div class="img-title">
                    Title of the image or photo
                </div>
                <div class="img-year">
                    2003
                </div>
                <div class="dimensions">
                    1200 x 900 cm
                </div>
                <div class="technique">
                    Oil on cotton
                </div>
            </div>
            </figcaption>
    </figure>

And then style the classes inside the caption like so:
CSS

@media screen and (min-width:0px) {
    .img-title {
        font-size: 2em;
    }

    .img-year {
        font-size: 1.2em;
    }

    .dimensions {
        font-size: 1em;
    }

    .technique {
        font-size: 0.8em;
    }              
}


@media screen and (min-width:320px) {
    .img-title {
        font-size: 4em;
    }

    .img-year {
        font-size: 2.2em;
    }

    .dimensions {
        font-size: 1.5em;
    }

    .technique {
        font-size: 1.1em;
    }              
}

Remember to include all JS and CSS files like shown here: http://photoswipe.com/documentation/getting-started.html

<!-- Core CSS file -->
<link rel="stylesheet" href="path/to/photoswipe.css"> 

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css"> 

<!-- Core JS file -->
<script src="path/to/photoswipe.min.js"></script> 

<!-- UI JS file -->
<script src="path/to/photoswipe-ui-default.min.js"></script>

Reference: Responsive PhotoSwipe with large controls on mobile device

Upvotes: 1

Related Questions