[新手上路]批处理新手入门导读[视频教程]批处理基础视频教程[视频教程]VBS基础视频教程[批处理精品]批处理版照片整理器
[批处理精品]纯批处理备份&还原驱动[批处理精品]CMD命令50条不能说的秘密[在线下载]第三方命令行工具[在线帮助]VBScript / JScript 在线参考
返回列表 发帖

[其他] 图片转网页本地浏览如何将多级目录也写入index.html?

本帖最后由 xp3000 于 2021-5-7 10:41 编辑

原始代码由论坛WHY编写,因本地浏览来回切换麻烦,
所以想把其他目录添加到<h3>里面去,标签在最下面预留了
子目录index.html正常了,
  1. @echo off&setlocal EnableDelayedExpansion
  2. title 图片重命名生成网页,res文件夹必须和要处理图片文件夹在同一个目录
  3. for /f "delims=:" %%i in ('findstr /n "^::::::" "%~f0"') do set "startLine=%%i"
  4. for /f "delims=" %%i in ('dir /b /ad /s * ^| findstr /i /v "\\res$"^| findstr /i /v "\\thumbs$"') do (
  5.     set "img=" & set n=0 & set Num=1000
  6.     set "fd=%%~nxi"
  7.     pushd "%%i"
  8.     (for %%j in (*.jpg *.bmp *.png) do (
  9.         set /a n+=1 & set /a Num+=1
  10.         if !Num! LSS 1000 (ren "%%j" "!Num:~-3!%%~xj") else ren "%%j" "!Num:~-3!%%~xj"
  11.         setlocal enabledelayedexpansion
  12.         for /f "delims=" %%k in ("!img!<img src="!Num:~-3!%%~xj" data-href="!Num:~-3!%%~xj" alt="Photo-!Num:~-3!%%~xj">") do (
  13.             endlocal & set "img=%%k"
  14.         )
  15.     )
  16.     popd
  17.     if defined img (
  18.         for /f "skip=%startLine% delims=" %%j in ('type "%~f0"') do (
  19.             set "s=%%j"
  20.             if "!s:<meta property=!" NEQ "!s!" (
  21.                 echo;    ^<meta property="og:title" content="!fd!"/^>
  22.             ) else if "!s:<title>=!" NEQ "!s!" (
  23.                 echo;    ^<title^>!fd!^</title^>
  24.             ) else if "!s:<img src=!" NEQ "!s!" (
  25.                 echo;            !img!
  26.             ) else if "!s:amountImages:=!" NEQ "!s!" (
  27.                 echo;                    amountImages: !n!,
  28.             ) else if "!s:<h1>=!" NEQ "!s!" (
  29.                 echo;            ^<h3^>^<div class="style"^>^<a href="./index.html" "javascript:;"^>!fd!^</a^>^<img src="./001.jpg" width="156" height="122" /^>^</div^>^</h3^>
  30.             ) else echo;!s!
  31.             if "!s:<h3>=!" NEQ "!s!" (cd %%i & setlocal
  32.             for /f "delims=" %%o in ('dir /a:d /b * ^| findstr /i /v "\\res$"^| findstr /i /v "\\thumbs$"') do set fd2=%%~nxo
  33.             echo;            ^<h3^>^<div class="style"^>^<a href="./!fd2!/index.html" "javascript:;"^>!fd2!^</a^>^<img src="./!fd2!/001.jpg" width="156" height="122" /^>^</div^>^</h3^>
  34.                 endlocal & popd
  35.             )
  36.         )
  37.     ) > "%%i\index.html"
  38. )
  39. cd ..&if not exist "res" md res&copy "%~dp0res" "res"
  40. )
  41. pause & exit
  42. :::::: htmlCodeStart ::::::
  43. <!DOCTYPE html>
  44. <head>
  45.     <meta name="viewport" content="initial-scale=1.0">
  46.     <meta property="og:title" content="MyPhotoFolder"/>
  47.     <meta charset="GB2312">
  48.     <title>MyPhotoFolder</title>
  49.     <meta name="keywords" content="">
  50.     <title>MyPhotoFolder</title>
  51.     <link rel="stylesheet" href="../res/common.css?v=1.6.3">
  52. </head>
  53. <body>
  54.     <div id="carousel" class="carousel full-page"><div id="pictures"></div></div>
  55.     <div id="thumbnailCollapse" class="left-bottom">
  56.         <div id="thumbIcons">
  57.             <div class="showThumbs"></div><div class="showThumbs"></div><div class="showThumbs"></div>
  58.         </div>
  59.     </div>
  60.     <div class="thumbs left-bottom">
  61.         <div class="thumbs-nav">
  62.             <div id="prevThumbs" class="icon-prev hidden"></div>
  63.             <div id="nextThumbs" class="icon-next hidden"></div>
  64.         </div>
  65.         <div id="thumbs" style="left: 0px">
  66.             <img src="1.png" data-href="1.png" alt="Photo-1">
  67.         </div>
  68.     </div>
  69.     <div id="navigation" class="right-top">
  70.         <nav>
  71.             <a id="prev" class="icon-prev" title="Previous Image">&nbsp;</a>
  72.             <a id="next" class="icon-next" title="Next Image">&nbsp;</a>
  73.         </nav>
  74.         <div id="fullscreen"><div id="fullscreenLogo" title="Go Fullscreen"></div></div>
  75.         <div id="slideshow"><div id="slideshowIcon" ></div></div>
  76.     </div>
  77.     <div id="imageInfo" class="right-bottom"><h2 id="imageCount"></h2></div>
  78.     <div id="sidebar" class="left-top">
  79.         <div id="folders">
  80.             <h2><a href="../index.html" class="folderTitle" style="margin-left:16px;" data-folderLevel="1">Home</a><img style="display: none" src="" /></h2>
  81.     <br><br /><br><br />
  82.             <h1><a>MyPhotoFolder</a></h1>
  83.             <h3>
  84. </div>
  85. </div>
  86.         <div id="links" class="left-bottom">               
  87.         <div class="sharing">
  88.     </div>
  89. </div>
  90.     <script>window.jQuery || document.write('<script src="../res/jquery-1.10.2.min.js"><\/script>');</script>
  91.     <script src="../res/main.js"></script>
  92.     <script src="../res/jquery.touchSwipe.min.js"></script>               
  93.     <script>
  94.         // Fully version: 1.6.3
  95.         if( $("html").hasClass("ie8") || $("html").hasClass("ie7") ) {
  96.             document.open();document.body.innerHTML = '';document.write(html); document.close();
  97.         }else {
  98.             $(window).load(function(){
  99.                 initSkin({
  100.                     animationInterval: 1000,
  101.                     amountImages: 1,
  102.                     wrapAround: true,
  103.                     fontSize: 13,
  104.                     showPhotoDataFromStart: false,
  105.                     slideshowInterval: 3,
  106.                     opacity: 30
  107.                 });
  108.             });
  109.         }
  110.     </script>
  111. </body></html>
复制代码
迅雷下载模版:
链接:https://pan.xunlei.com/s/VMZr8JL4ANW63kVQKnb0HuEfA1
提取码:grqh

原贴也有样本下载
http://www.bathome.net/thread-53861-1-1.html

在common.css添加几行就和迅雷下载地址的一样了
.style{ display:block;text-align:center; position:relative;}
.style img{ display:none;}
.style:hover img{ position:absolute; left:50%; top:-122px; margin-left:-75px; padding-top:-50px; display:block;}

38、39、40行删掉,单独用这个
,弄了一个得运行两次BAT才能成功,第一次没检测到输出的index.html第二次检测到index.html才复制res所有文件夹
  1. @echo off&setlocal EnableDelayedExpansion
  2. title 图片重命名生成网页,res文件夹必须和要处理图片文件夹在同一个目录
  3. for /f "delims=" %%a in ('dir /b /ad /s * ^| findstr /i /v "\\res$"^| findstr /i /v "\\thumbs$"') do (
  4.     pushd %%a&set A=%%a
  5.     @for /f "delims=" %%b in ('dir /a:d /B %%a\* ^| findstr /i /v "\\res$"^| findstr /i /v "\\thumbs$"') do (set B=%%b
  6.         for /f "delims=" %%c in ('dir /b/a-d/oN "%%b\index.html"') do (
  7.     popd
  8. if  exist "!A!\!B!\index.html" md "!A!\res" & copy "%~dp0res" "!A!\res"
  9. ))
  10. )
  11. pause
复制代码
…………
另有可能用到缩略图转换
  1. @echo off&setlocal enabledelayedexpansion&cd /d %~dp0
  2. if not exist "C:\Windows\System32\nconvert.exe" (
  3.     echo 没有nconvert,请前往下面地址或其他网站下载,放入C:\Windows\System32
  4.     echo,http://bcn.bathome.net/s/tool/index.html?key=nconvert
  5. pause&exit /b
  6. )
  7. set /p "str=请输入缩略图最大像素:"
  8. ::排除res、thumbs、slides文件夹
  9. for /f "delims=" %%a in ('dir /ad /b /s * ^| findstr /i /v "\\res$" ^| findstr /i /v "\\thumbs$" ^| findstr /i /v "\\slides$"') do (
  10. for %%i in ("%%a\*.jpg" "%%a\*.png" "%%a\*.bmp") do (
  11.     if not exist "%%a\%%~nxi" md "%%a\thumbs")
  12.     cd "%%a"&echo.&echo 进入 "%%a" 文件夹查找图片. . .&echo 缩略图将存放于各自文件夹的thumbs内. . .
  13.     for /f "delims=" %%b in ('dir /a-d /b "*.jpg" "*.png"') do (
  14.         for /f "tokens=1* delims=:" %%i in ('nconvert.exe -info "%%b"^|findstr /i /l /c:"Width"') do set W=%%j&set W=!W: =!
  15.         for /f "tokens=1* delims=:" %%k in ('nconvert.exe -info "%%b"^|findstr /i /l /c:"Height"') do set H=%%l&set H=!H: =!
  16.             if !W! leq !H! (set W=0&set H=!str!) else (set W=!str!&set H=0)
  17. nconvert -rmeta -quiet -overwrite -out jpeg -ratio -resize !W! !H! -c 8 -o "%%a\thumbs\%%~nb.jpg" "%%~nxb"
  18.     )
  19. )
  20. echo.
  21. echo,创建缩略图完成. . .
  22. pause&exit /b
复制代码

TOP

返回列表