問題タブ [image-enlarge]

特定の親ディレクトリで新しい画像をチェックするWPFアプリケーションがあり、新しい画像がある場合は、現在表示されている画像を切り替えます(6つの画像があります)。

ユーザーが画像の1つをクリックできるようにする機能を追加したいと思います。そのクリックすると、「新しい」ウィンドウが表示され、その画像が拡大されて表示され、画面上の任意の場所をクリックするとこの拡大が終了し、フォーカスを他の (6) 画像に戻します。

それは可能ですか？グーグルを試しましたが、関連する解決策zoom image wpfしか見つかりませんでした。mouse-drag

私も使ってみviewportましたが、それもうまくいきませんでした。

更新 - XAML

データ属性ではなくopen / enlargejquery / jsを使用してモーダルで画像を作成するにはどうすればよいですか?

ユーザーが画像をコンテンツ エディターに挿入するときはいつでも、js を使用してモーダルで展開するためにクリック可能にする必要があるため、ユーザーが使用方法がわからないデータ属性を入力することに頼ることはできません。

私は試した：-

jQuery :-

画像ソースをモーダルに表示するには、jquery に情報を追加する必要がありますか?

ありがとうございました！！！

私はJavascriptにかなり慣れていないので、拡大された画像をクリックすると再び縮小する「クリックで拡大」のような効果を得ようとしています。拡大は、サムネイルを元の画像に置き換えることによって行われます。また、後でデータベースの画像を使用してスライドショーを取得したいと考えています。

そのために、クラスによって拡大が可能であることを示す id を置き換えるテストを作成し、使用している URL を追跡できるようにグローバル変数も使用します。これがベストプラクティスかどうかはわかりませんが、より良い解決策は見つかりませんでした。

最初の部分は正常に動作し、私のイメージは問題なく変更され、「アラート」ステートメントに従って値も更新されます。ただし、2 番目の部分、クラスのある部分はトリガーされません。

私は何を間違っていますか（非常に多くの悪い習慣を除いて）？

クラスを変更する代わりに id を直接変更すると (.image_enlarged を #image_enlarged に置き換えるなど)、最初の関数 (id を持つ関数) を呼び出すように見えますが、更新された id が出力され、かなり混乱します。

HTMLに関しては、それは本当に簡単です：

私はしばらくピカソを使っていましたが、とても満足しています。ただし、ピカソによって読み込まれたイメージビューの画像を拡大する必要があります。のように、画像のzoomImageFromThumbを作成したいだけです。ただし、従来のzoomImageFromThumbでは、プロジェクトにリソースが存在する必要があります。私の場合、ピカソはそれをロードします..では、画像ビューをクリックしてピカソがロードした画像を拡大するにはどうすればよいですか?

これまでの私のコード:

このブログ投稿 (コメントを参照 - SO を初めて使用するため、リンクを 2 つ以上投稿することはできません) を使用して、自分の Web サイトに固定されていない (固定されていない) フッターを配置しました。

このブログ投稿 (コメントを参照) を使用してホバー時に画像を表示するまで、Web サイトのどこでも機能していました。現在、フッターはページの下部よりかなり上に浮いていますが、画像ホバー スタイルのページのみです。これは壊れたページで、これが機能しているページです。

Chrome 開発ツールでそれらを削除するul.enlarge spanと、フッターが元の位置に戻りますが、拡大されたホバー画像がすべてページに表示されます (明らかに、私が望むものではありません)。 .

フッターをページの下部にとどめ (コンテンツが一番下まで届かない場合でも)、ホバーしたときに画像を拡大する方法はありますか???? ページの下部にある巨大な空白のギャップの原因は何ですか??

クリックして画像を拡大するためのガイドを見つけましたが、うまくいきません。画像をクリックして拡大すると、小さいものが前面に表示されます。

これをhtmlに入れました：

CSS:

JavaScript:

複数の写真がある場合は、別の方法で行う必要がありますか?