シーケンス
プロジェクトマネージャはどのように達成するかを確認することですか?
プラグインを選択します
:いくつかのプラグインを試してみてください、リンク、プラグインを使用して簡単にライトボックスまだあったhttps://github.com/lokesh/lightbox2、プラグインは以下のような特徴を持っているが:
- 写真をクリックすると、自動的に大きくするに従って表示されます
- 写真は、フロントとリアがあり、[閉じる]ボタンをアニメーション効果をロードしています
詳細を見たいと思って、あなたが見ることができます:https://www.lokeshdhakar.com/projects/lightbox2/
実現
上記のリンクが良いのダウンロードをした後を通じて、いくつかの書類が必要:lightbox.css、ライトボックスプラスjquery.js、close.png、loading.gif、next.png、prev.png、ファイルのパスを次のように:
まず、最初として、公園をブログにファイルをアップロードする必要があります。
など、それを行う方法、ガーデンのブログは、PNG形式の画像をサポートしていない、問題を見つけるように見えましたか?:あなたは多くのような、あるようにICO形式変換サイトへのターンなどの他の形式、PNG形式にをオンにするサイトを見つけることができますhttps://www.easyicon.net/covert/ 。
:としてのブログの庭にアップロードし、より良い、我々まずclose.ico、loading.gif、next.ico、prev.ico、ライトボックスプラスjquery.jsファイル用の画像フォーマットの変更、
close.icoに示す修正したファイルのリンクアドレス:次にclose.ico、loading.gif、next.ico、prev.icoリンクアドレス、リンクアドレスにlightbox.cssを変更し、私たちのような、アップロードをクリックすることで、特定のファイルを表示することができます下記:
リンクアドレスの後、すべての変更が行われ、lightbox.css私たちは、その後、公園をブログにアップロードを変更し、アップロードするために必要なファイルが完了します。
接下来我们在 “页脚Html代码” 这个位置添加如下代码,就完成了修改,记得把文件地址替换成自己的。
<!-- lightbox的样式 --> <link href="https://blog-static.cnblogs.com/files/huangxy/lightbox.css" rel="stylesheet"> <!-- lightbox.js核心代码 --> <script src="https://blog-static.cnblogs.com/files/huangxy/lightbox-plus-jquery.js"></script> <script type='text/javascript'>$('#cnblogs_post_body img').wrap(function(){return "<a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"});</script> <script type='text/javascript'>$(".code_img_closed").unwrap();</script> <script type='text/javascript'>$(".code_img_opened").unwrap();</script>
还没实现的,赶快来试一下吧!