Markdown转HTML后图片显示优化推荐

[wedojava]

推荐两个js图片显示效果插件:

1.华丽全面但稍微复杂点的:https://github.com/fancyapps/fancyBox
2.简洁明快且实现简单点的:https://github.com/fat/zoom.js

我是用的第二个

修改:
只需要修改/vendor/yuanchao/laravel-5-markdown-editor/src/Parsedown.php里inlineImage()方法:

'attributes' => array(
                    'src' => $Link['element']['attributes']['href'],
                    'alt' => $Link['element']['text'],
                    'data-action'=>"zoom",
                    'width' => '500',
                ),

'data-action'=>"zoom",如果用第二个链接,这个是关键,我用的第二个.

然后在需要该效果的页面加载(我把相关的js和css放到了public/js/imgInZoomByJQuery目录下了):

<link href="{{ asset('/js/imgInZoomByJQuery/zoom.css') }}" rel="stylesheet">
<script type="text/javascript"  src="{{asset('/js/imgInZoomByJQuery/transition.js')}}"></script>
<script type="text/javascript"  src="{{asset('/js/imgInZoomByJQuery/zoom.min.js')}}"></script>

希望能帮到需要的人

[endachao]

感谢分享～

但是不得不面临一个问题，如果你升级为新版本的时候，新版本里面没这个东西，就会覆盖掉哦，我也考虑了一下，是否需要把这个东西加上，但是考虑到不是所有人都需要，还是在考虑考虑吧～

[MiYogurt]

弄了一上午才调试出来第一个，我的用第二个显示有问题。
直接在图片上加类，图片点击后会消失，想在源码里面改，发现return的是一个对象，渲染图片函数我没找到，我自己怎么用jQuery的css()方法，怎么设置display，它都不变。最后还是按官方的demo来，加一个包裹层，开始用each来手动加，怎么写都不对，查手册发现了wrap()，问题迎刃而解。

• 引入库（当然还包括jQuery）

  <link rel="stylesheet" href="{{ url('plugin/fancybox/source/jquery.fancybox.css') }}" type="text/css"  />
  <script type="text/javascript" src="{{ url('plugin/fancybox/source/jquery.fancybox.pack.js') }}" />

• 添加类

'attributes' => array(
        'class'=>'ui rounded bordered image fancybox_img',
        'src' => $Link['element']['attributes']['href'],
         'alt' => $Link['element']['text'],
 ),

• 最后添加jQuery事件，先添加包裹层。后执行插件初始化函数。

  $('.fancybox_img').each(function(){
     $(this).wrap("<a href="+ this.src +" class='fancybox'></a>");
  });

  $('.fancybox').fancybox();

[wedojava]

有毅力,感谢分享,脚本很多时候很奇怪,有些奇怪的问题真是需要毅力,辛苦啦,造福万民哈