イメージsrc from url？

私のウェブサイトの

私は、画像をナビゲートするために以下の機能を使用しています。（http://jsut4fun.site40.net/2.html）この関数はURLに1を加え、次のページに移動します。あなたが見ることができるように私は各Webページと画像の名前を変更する必要がありますし、各画像番号のWebページのコードを変更する必要があります。私はコードを変更する必要はありませんので、イメージのsrcにURLから番号を格納する任意の簡単な方法はありますか？一般的に、これを改善するのに役立つアイデアはありますか？その後、まだ私のjavascriptのnoob :)イメージsrc from url？

<img src="Images/100.jpg">  
<script> 
     var url = location.href; 
     function nextImage() { 
      return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) { 
       return((Number(p1) + 1) + p2); 
      })); 
     } 
     function prevImage() { 
      return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) { 
       return((Number(p1) - 1) + p2); 
      })); 
     } 
     </script> 
      <a href="javascript: window.location.href = prevImage();"> <img border="0" src="Assets/Left.png" /></a> 
      <a href="javascript: window.location.href = nextImage();"> <img border="0" src="Assets/Right.png"/></a>

出典

2012-01-21 Maan Sahir

各HTMLファイルを物理的に作成したくないという主な問題はありますか？（1.html、2.html、3.htmlなど）これはPHPスクリプトのはるかに適切な仕事であるように見えるので、URLがページが既に読み込まれた後にそれらを操作するのではなくページに読み込まれるようになりますロードされる。 –

私はindex.phpを作成しました。それが動作すれば私に教えてください。テストできません。私はそれを更新します。 – mowwwalker

使用jqueryの
そしてちょうど$("img").attr("src")値を変更$("img")を使用して、または$("#Id_OF_Img_Tag") で画像を選択します。
インクリメントまたはデクリメントは簡単です

出典

2012-01-21 08:23:07

私は現在のページの番号を数値に変換する方法を知らないので、それを変数に格納してイメージのsrcとして使用することはできません。 –

は、クエリ文字列からのページ番号ですか？ –

いいえ個別のページがあります。各ページの番号。 –

PHPをこのように使用します。私はあなたが何をしようとしているのかは分かりません。

編集：

私はあなたのための簡単なPHPのページを書きました。 "index.php"として保存し、あなたのpublic_htmlに入れてください。私はそれが動作するかどうかを調べるには興味があります：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="keywords" content="just 4 fun, funny, comics, image, photo, humor, joke, pics, picture, fail, epic, fun" /> 
<title>Just 4 Fun</title> 
<style type="text/css"> 
#Thewholewebsite { 
    left:357px; 
    top:77px; 
    width:1080px; 
    height:2000px; 
    z-index:1; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: #DDD; 
    background-image: url(Assets/ContentBC.png); 
} 
.Bottomad { 
    height: 60px; 
    width: 468px; 
    margin-right: auto; 
    margin-left: auto; 
} 
.share { 
    height: 60px; 
    width: 714px; 
    margin-right: auto; 
    margin-left: auto; 
} 
.Content { 
    float: left; 
    height: 1850px; 
    width: 714px; 
    margin-top: 20px; 
    margin-left: 15px; 
} 
.Facebookcomments { 
    height: 1000px; 
    width: 714px; 
} 
.Sidead { 
    float: right; 
    height: 280px; 
    width: 336px; 
    margin-top: 20px; 
    margin-right: 15px; 
} 
.Facebooklikebox { 
    float: right; 
    height: 600px; 
    width: 336px; 
    margin-top: 20px; 
    margin-right: 15px; 
} 
.Header { 
    background-image: url(Assets/HeaderLogo.png); 
    height: 90px; 
    width: 335px; 
    margin-top: 5px; 
    margin-left: 10px; 
    float: left; 
} 
.Headerad { 
    background-color: #000; 
    height: 90px; 
    width: 728px; 
    margin-right: 6px; 
    float: right; 
    margin-top: 5px; 
} 
.Facebookcomments { 
    height: 1000px; 
    width: 714px; 
} 
</style> 
<script type="text/javascript"> 

    var _gaq = _gaq || []; 
    _gaq.push(['_setAccount', 'UA-28177073-1']); 
    _gaq.push(['_setDomainName', '.site40.net']); 
    _gaq.push(['_trackPageview']); 

    (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
    })(); 

</script> 
</head> 

<body background="Assets/MainBC.png"> 
<div id="Thewholewebsite"> 
<div class="Header"></div> 
<div class="Headerad"></div> 
<div class="Content"> 
<center> 
<div id="fb-root"></div> 
<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=324524777119"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 


<br/> 
<br/> 
    <br/> 
    <br/> 
    <?PHP 
    $prev=$next=true; 
    if(isset($_GET['image'])){ 
     $imgnum = $_GET['image']; 
     if($imgnum==1){ 
      $prev=false; 
     } 
    } 
    else{ 
     $imgnum=1; 
     $prev=false; 
    } 
    echo "Root: ".$_SERVER['DOCUMENT_ROOT']; 
    if(!file_exists($_SERVER['DOCUMENT_ROOT'].'/public_html/Images/'.$imgnum.'.jpg')){ 
     $imgnum=1; 
     $prev=false; 
    } 
    if(!file_exists($_SERVER['DOCUMENT_ROOT'].'/Images/'.$imgnum+1 .'.jpg')){ 
     $next=false; 
    } 


    ?> 
<img src=<?PHP echo "\"Images/".$imgnum.".jpg\"" ?>/> 
<br/> 
<script> 
var url = location.href; 
function nextImage() { 
    window.location.href = 
} 
function prevImage() { 
    return(url.replace(/(\d+)(\.html)$/, function(str, p1, p2) { 
     return((Number(p1) - 1) + p2); 
    })); 
} 
</script> 
<?PHP if($prev){?> 
     <a href=<?PHP echo "\"".$_SERVER['DOCUMENT_ROOT'].'/Images/'.$imgnum-1 .'.jpg"' ?>> <img border="0" src="Assets/Left.png" /></a> 
    <?PHP } if($next){?> 
     <a href=<?PHP echo "\"".$_SERVER['DOCUMENT_ROOT'].'/Images/'.$imgnum+1 .'.jpg"' ?>> <img border="0" src="Assets/Right.png"/></a> 
    <?PHP }?> 
<br/> 
<script type="text/javascript"><!-- 
google_ad_client = "ca-pub-6477782079941355"; 
/* Just 4 fun */ 
google_ad_slot = "0518220826"; 
google_ad_width = 468; 
google_ad_height = 60; 
//--> 
</script> 
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<br/> 

<a name="fb_share"></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
     type="text/javascript"> 
</script> 
<g:plusone></g:plusone> 
<script type="text/javascript"> 
    (function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
    })(); 
</script> 
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
<br/> 
<div class="fb-comments" data-href="http://jsut4fun.site40.net/9.html" data-num-posts="10" data-width="714"></div> 
</center> 
</div> 



<div class="Sidead"><script type="text/javascript"><!-- 
google_ad_client = "ca-pub-6477782079941355"; 
/* dam this is funny ads */ 
google_ad_slot = "7487699411"; 
google_ad_width = 336; 
google_ad_height = 280; 
//--> 
</script> 
<script type="text/javascript" 
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script></div> 
<div class="Facebooklikebox"> 
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Just-For-Fun/301627143220739" data-width="336" data-height="600" data-show-faces="true" data-stream="true" data-header="true"></div></div> 
</div> 

</div> 
</body> 
</html>

出典

2012-01-21 08:24:06 mowwwalker

あなたは私のウェブサイトをよく見ましたか？私はちょうど私がウェブサイトを更新したいと思うたびにすべてのものの名前を変更したくない。 –

私はhttp://jsut4fun.site40.net/ –

を行った@MaanSahir、まあ、今それを試してください。申し訳ありませんが、私はそれを得る前にカップルになるかもしれません、私は自分のサーバー上で一定の試行錯誤に慣れています。 – mowwwalker

マアン、私は今あなたがしたいことを理解していると思います。手動で変更することなく、番号付きのすべてのページ上のイメージのsrcをリセットできるようにしたいとします。これはJavascriptで行うことができますが、JSを有効にしていないブラウザでは画像が間違っている可能性があるため、厳密にはそれが推奨されているかどうかはわかりません。それは非常に特殊なケースですが、Googlebotが含まれる可能性があります。そのため、画像がSEO目的に合っていることが重要な場合は、すべての画像ファイル名を変更する必要はないでしょう。

これは価値がありますが、このJSはあなたが望むことをする必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 

    $(document).ready(function() { 

     var currentPage = window.location.href.split('/'); 
     var currentNum = currentPage[3].split('.')[0]; 
     $('img').attr('src', 'Images/' + currentNum + '.jpg'); 

     $('#prev').click(function() { 
      move(-1); 
     }); 

     $('#next').click(function() { 
      move(1); 
     }); 

     function move(n) { 
      window.location.href = Number(currentNum) + Number(n) + '.html'; 
     } 

    }); 

</script>

このビットは、あなたのページにjQueryのを含んで

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

ビット$(document).ready(function() { ... }内のページが表示する準備ができたときにそれがロードされる前に、通常、実行されます。

var currentPage = window.location.href.split('/');は、ページの現在のURLを取得し、各/文字で分割します。この行は、URLの部分を含む配列を生成します。 URLがhttp://jsut4fun.site40.net/5.htmlの場合、「5.html」は配列のインデックス位置[3]にある4番目の部分になります。

var currentNum = currentPage[3].split('.')[0]; URLの4番目の部分を取得し、 '。'で分割します。これは私達にページ番号を与えます。

$('center img').attr('src', 'Images/' + currentNum + '.jpg');は、メイン画像のsrc属性をページの正しいURLにリセットします。 'center img'は、中心要素の子である任意の画像を選択します。

あなたがページ間を移動するために、既存のリンクやprevImage（）およびネクストイメージ（）関数を保つことができますが、あなたにもjQueryを使ってこれをやってみたかった場合は

$('#prev').click(function() { 
    move(-1); 
}); 

$('#next').click(function() { 
    move(1); 
}); 

function move(n) { 
    window.location.href = Number(currentNum) + Number(n) + '.htm'; 
}

を言うビットでそれを行うことができます

この例では、リンクのIDが「prev」と「next」であることを前提としています。グローバル検索と置換を行うと、すべてのページの現在のリンクにIDを追加するだけで十分です。

希望すると便利です。

出典

2012-01-21 14:58:45

答えて

関連する問題