About the use of Fancybox in markdown file about hexo-theme-tranquilpeak HOT 10 CLOSED

Here is an example :

the correspondig tag is : {% fancybox inline 1.png 3.png ElCapitan %}
fancybox : call fancybox tag
inline : add inline class to the thumbnail image to stylize it (display : inline-block)
1.png : wide image (original)
2.png : small image (thumbnail) 150 x 150
ElCapitan : the image title

Is it good? or do you want something else?

from hexo-theme-tranquilpeak.

Hi Yalun, the syntax used in "Tags plugins showcase" for fancybox is {% fancybox image2.jpg Sunrise %}. I don't know why this syntax was removed from Hexo docs... . I recommand to use relative url for the image path.

from hexo-theme-tranquilpeak.

Hi Louis,

Thank you so much for your answer. It works! However I noticed that the width of the fancybox is much larger than the width of the image. I really hope that they could be equal since I need to align multiple images on the same line, using html syntax(I think the markdown syntax of fancybox probably does not support this). So do you know where I can change the code so that the width of the fancybox fits the width of the image?

from hexo-theme-tranquilpeak.

It's currently impossible to do that. You have to do it only with HTML and without fancybox tag. If your image is smaller than the page then you don't need fancybox.

from hexo-theme-tranquilpeak.

I checked the demo page of fancybox here and it does support putting multiple images with fancybox in the same line. So I think if the fancybox in your theme is the same as the official one, by using the right HTML syntax in the markdown file, it should also produce the result I want, right? (According to my understanding inserting HTML code in markdown file is almost no different from inserting that in the generated HTML file). So I tried it using the following HTML code:

<a class="fancybox" href="/images/projects/skeletonplayer.jpg" title="Action Player"><img src="/images/projects/skeletonplayer.jpg" alt="Action Player" height="270"></a><a class="fancybox" href="/images/projects/push.png" title="Real Time Recognition"><img src='/images/projects/push.png' alt='Real Time Recognition' height="270"/></a>

This code works correctly, but the two images are not in the same line. I tried to specify a smaller height but it didn't work. I guess it is probably because the parameters passed to $(".fancybox").fancybox() are not the same as the ones of the demo page of fancybox, which are all default values. I searched your theme and found this function exists in three files: source/_js/fancybox.js, source/assets/js/tranquilpeak.js and source/assets/js/script.js, with exactly the same parameters. I guess one of them probably overrides all the others. So which one is it? I tried to change some parameters in all three functions but nothing changed after I ran "hexo g". For example I changed the "openEffect" value from "elastic" to "none", but the fancybox still opened elastically.. Is it the correct way to configure the fancybox?

from hexo-theme-tranquilpeak.

I'm going to try to do that. I come back to you as soon as I have the solution

from hexo-theme-tranquilpeak.

Yes! It looks exactly like what I want. And is the caption(ElCaption) going to be displayed below the image? I think it will be great if it is.

Thank you so much for your efforts and I look forward to the new version!

from hexo-theme-tranquilpeak.

I will improve the way that Tranquilpeak handle images in post (with fancybox too) and give more posibilities. I will release that in Tranquilpeak 1.2.1 at the end of the week. :)

from hexo-theme-tranquilpeak.

I implemented a new tag : image for Tranquilpeak 1.3! Here is a preview of what you will be able to do with the new image tag and some css classes included :)
The tag will be : {% image [classes] /path/to/image [/path/to/thumbnail] [width of thumbnail] [height of thumbnail] [title text] %}

from hexo-theme-tranquilpeak.

Tranquilpeak v1.3.0 is released :) check the user documentation about image tag and wide image

from hexo-theme-tranquilpeak.