Caption text

[Stombahh]

How to add caption text? Documentation about options would be nice.

[rap2hpoutre]

Thanks for your contribution! See: https://github.com/rap2hpoutre/vue-picture-swipe/issues/2

It's a work in progress, I will add options soon!

[rap2hpoutre]

@Stombahh Do you mean caption on thumbnails (top? bottom?) or full size images? Could you create a fake screenshot for your need?

[Stombahh]

I mean caption to bottom of full size images. Just like captions in PhotoSwipe.

Also it would be nice if you could customize sharing options. Not everyone want to have image download available on their gallery. Should I make an another issue about that?

[rap2hpoutre]

About sharing option, you can use options for Photoswipe options.

Disable "share" buttons:

<vue-picture-swipe :options="{shareEl: false}"></vue-picture-swipe>

You can customize share buttons too:

const options = { shareButtons: [
    {id:'facebook', label:'FOOBAR', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
    {id:'twitter', label:'Test 123', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
    {id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
    {id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
]};

(update to v0.2.3)

[Stombahh]

Could you explain in greater detail where I should place options?

<vue-picture-swipe :options="{shareEl: false}"></vue-picture-swipe> This works but I can't add any proper options because I got parsing error with const inside . "The keyword 'const' is reserved". I have no idea what causes that. Enabling es6 in eslintrc doesn't work. Any ideas what to do?

[rap2hpoutre]

You could try (inline version):

<vue-picture-swipe :options="{ shareButtons: [ YOUR BUTTONS HERE ]}"></vue-picture-swipe>

The "const options = ..." version is for ES6 vue components. Example of a vue component that works on my computer:

<template>
  <vue-picture-swipe :items="items" :options="options"></vue-picture-swipe>
</template>
<script>
  import VuePictureSwipe from 'vue-picture-swipe';
  export default {
    data() {
      return {
        options: {
          shareEl: true,
          shareButtons: [
            {id:'facebook', label:'Facebook', url:'https://www.facebook.com/sharer/sharer.php?u={{url}}'},
            {id:'twitter', label:'TEST 123', url:'https://twitter.com/intent/tweet?text={{text}}&url={{url}}'},
            {id:'pinterest', label:'Pin it', url:'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'},
            {id:'download', label:'Download image', url:'{{raw_image_url}}', download:true}
          ],
        },
        items: [{
          src: 'http://via.placeholder.com/600x400',
          thumbnail: 'http://via.placeholder.com/64x64',
          w: 600,
          h: 400
        },
          {
            src: 'http://via.placeholder.com/1200x900',
            thumbnail: 'http://via.placeholder.com/64x64',
            w: 1200,
            h: 900
          }
        ]};
    }
  }
</script>

[rap2hpoutre]

@Stombahh Did it fixed your problem?

[ArtStepanyuk]

@rap2hpoutre Hii also would like to know about caption text is that feature implemented? I see related code but I cant to seem to make it work.

Never mind it found the problem One line of code was missing

        // create slide object
        item = {
          src: linkEl.getAttribute('href'),
          w: parseInt(size[0], 10),
          h: parseInt(size[1], 10),
          title: linkEl.title <---- this one
        };

Also css to center text.

Would you preffer me to create PR?

[Stombahh]

Seems like @ArtStepanyuk found the solution I was looking for. I haven't tried it yet, but seems good.

[ArtStepanyuk]

@rap2hpoutre Please check this PR https://github.com/rap2hpoutre/vue-picture-swipe/pull/9 When you have time I cant test It much right now since I'm not at working place :) Hope this helps I was wrong in my previous comment it should be

title: figureEl.textContent

Hope this helps

[Stombahh]

        // create slide object
        item = {
          src: linkEl.getAttribute('href'),
          w: parseInt(size[0], 10),
          h: parseInt(size[1], 10),
         title: figureEl.textContent
        };

Doesn't work for me in inline usage.

[ArtStepanyuk]

@Stombahh did you add title to image object?

<vue-picture-swipe :items="[
    {src: 'http://example.org/xl.jpg',thumbnail: 'http://example.org/sm1.jpg',w: 600,h: 400, title: 'My caption'},
    {src: 'http://example.org/xxl.jpg',thumbnail: 'http://example.org/sm2.jpg',w: 1200,h: 900, , title: 'My caption2'}
  ]"></vue-picture-swipe>

Okey i did some more testing Ill update pr in few mins and it should work Now I know where from I got the idea with linkEl. sorry for the inconvenience that what I get for doing before going home after work commits :) Be sure to check with updated commit from PR

[Stombahh]

Yes, I did add title to image object. I did everything like described but still doesn't work. Changed to Vue-Preview and there caption works perfectly.

[ArtStepanyuk]

@Stombahh These changes are not merged yet. I have created a pull request with them, for now, you can manually try update sources with changes from pull request and check if it will work out of for you

https://github.com/rap2hpoutre/vue-picture-swipe/pulls

If it stills doesnt work for you for some reason can you give me link to a repo? ill try to look into it

[rap2hpoutre]

@Stombahh Available in v0.4.0 thanks to @ArtStepanyuk! Let me know if it does not fix your problem.