JQueryを使用してSquarespaceのプロジェクトページの画像にリンクを追加するには

Question

私はSquarespaceを使ってウェブサイトを作っています。 Squarespaceのプロジェクトページではタイトルと説明付きのイメージを追加できますが、ページを編集するための直接アクセスはありません。彼らは現在、画像のクリックスルーを行う機能を提供していないので、JQueryを使用してそれを画像に追加しようとしています。ここで

は、私が働いているウェブサイトのページです：すべての負荷のdiv要素のid変化がPrestigious Affairs

、私はプロジェクトページ（プロジェクトslide-のために使用されている画像のクラスを使用しようとしていますイメージ）をターゲットにしてから、.wrap（）を使ってhrefを追加します。誰かが私に間違ってやっていることを教えてもらえますか？作品の種類が分かりますが、セクション全体が脈打っているので、左のオフセット・イメガのタイトルと説明が間違っています。

$(function(){ 
    $("img.project-slide-image:eq(0)").wrap('<a href="/about-us/"></a>'); 
    $("img.project-slide-image:eq(1)").wrap('<a href="/events/"></a>'); 
    $("img.project-slide-image:eq(2)").wrap('<a href="/prom/"></a>'); 
    $("img.project-slide-image:eq(3)").wrap('<a href="/weddings/"></a>'); 
    $("img.project-slide-image:eq(4)").wrap('<a href="/floral/"></a>'); 
    $("img.project-slide-image:eq(5)").wrap('<a href="/contact-us/"></a>'); 
}); 

ここは、わずかに異なるにもかかわらず、動作しているようだ：Code Snippet

Answer 1

ので、いじりかなりの後、私は解決策を見つけ出すことができました。私はこれがおそらくSquarespaceにのみ関連していることを認識していますが、コードが誰かのために他の状況で便利になるかもしれないので、私はそれを投稿します。私は問題を引き起こしていたので、.wrapの代わりに.insertBeforeを使ってしまいました。

これは私が使用して終了jQueryのです：だから

$(function(){ 
    $('<div class="mainLinksOuter"><a href="/about-us/"><div class="mainLinksRight"></div></a></div>').insertBefore($("figure:eq(0)")); 
    $('<div class="mainLinksOuter"><a href="/events/"><div class="mainLinksLeft"></div></a></div>').insertBefore($("figure:eq(1)")); 
    $('<div class="mainLinksOuter"><a href="/prom/"><div class="mainLinksRight"></div></a></div>').insertBefore($("figure:eq(2)")); 
    $('<div class="mainLinksOuter"><a href="/weddings/"><div class="mainLinksLeft"></div></a></div>').insertBefore($("figure:eq(3)")); 
    $('<div class="mainLinksOuter"><a href="/floral/"><div class="mainLinksRight"></div></a></div>').insertBefore($("figure:eq(4)")); 
    $('<div class="mainLinksOuter"><a href="/contact-us/"><div class="mainLinksLeft"></div></a></div>').insertBefore($("figure:eq(5)")); 
}); 

、私はそれが画像のサイズにマッチすることを確認するために大きさを制御することができるようにDIVを囲むHREFを挿入することになりました。私は、ページの右側にあるリンクをフォーマットするCSSのクラスと、画像の上に内側のDIVを保持するために、左側のリンク用に別々のものをフォーマットしなければなりませんでした。なぜなら、Squarespaceテンプレート働く次に、CSSの書式設定を追加するための外部DIVのクラス。

私はそれを別のDIVの中に入れて、私がページ上で望む場所に配置することができます。そうすることなく、hrefでDIVサラウンドがどこで終わったのかを制御できず、768px幅と640px幅のモバイル用サイトの書式設定が変更されたため、これらのインスタンスに対してCSSを調整する必要がありました。

基本的には、空のDIVがhrefで囲まれており、各画像の上にそれを囲み、その上に残り、レスポンシブデザインでサイズを調整します。