Hugging Face's logo

Spaces:
TomatoFull
/
Sham-Images
Running

App Files Community
TomatoFull commited on
Commit
ac3c0d4
·
verified ·
1 Parent(s): 450f71c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +33 -20
index.html CHANGED
@@ -56,38 +56,51 @@
56
  <body>
57
 
58
  <h1>معرض الصور</h1>
59
- <p>اضغط على أي صورة لتحميلها. بعد ذلك يمكنك فتح معرض الصور ومشاركتها عبر واتساب.</p>
60
  <div class="gallery">
61
  <div class="image-container">
62
- <p class="instruction">اضغط لتحميل ومشاركة الصورة</p>
63
- <a href="http://192.168.44.1:8081/1.jpg" download="1.jpg">
64
- <img src="http://192.168.44.1:8081/1.jpg" alt="صورة 1">
65
- </a>
66
  </div>
67
  <div class="image-container">
68
- <p class="instruction">اضغط لتحميل ومشاركة الصورة</p>
69
- <a href="http://192.168.44.1:8081/2.jpg" download="2.jpg">
70
- <img src="http://192.168.44.1:8081/2.jpg" alt="صورة 2">
71
- </a>
72
  </div>
73
  <div class="image-container">
74
- <p class="instruction">اضغط لتحميل ومشاركة الصورة</p>
75
- <a href="http://192.168.44.1:8081/3.jpg" download="3.jpg">
76
- <img src="http://192.168.44.1:8081/3.jpg" alt="صورة 3">
77
- </a>
78
  </div>
79
  <div class="image-container">
80
- <p class="instruction">اضغط لتحميل ومشاركة الصورة</p>
81
- <a href="http://192.168.44.1:8081/4.jpg" download="4.jpg">
82
- <img src="http://192.168.44.1:8081/4.jpg" alt="صورة 4">
83
- </a>
84
  </div>
85
  </div>
86
 
87
  <script>
88
- document.querySelectorAll('.image-container a').forEach(link => {
89
- link.addEventListener('click', () => {
90
- alert("تم تحميل الصورة، الآن يمكنك الذهاب إلى معرض الصور ومشاركتها عبر واتساب.");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
91
  });
92
  });
93
  </script>
 
56
  <body>
57
 
58
  <h1>معرض الصور</h1>
59
+ <p>اضغط على أي صورة لتحميلها.</p>
60
  <div class="gallery">
61
  <div class="image-container">
62
+ <p class="instruction">اضغط لتحميل الصورة</p>
63
+ <img src="http://192.168.44.1:8081/1.jpg" alt="صورة 1" data-src="http://192.168.44.1:8081/1.jpg">
 
 
64
  </div>
65
  <div class="image-container">
66
+ <p class="instruction">اضغط لتحميل الصورة</p>
67
+ <img src="http://192.168.44.1:8081/2.jpg" alt="صورة 2" data-src="http://192.168.44.1:8081/2.jpg">
 
 
68
  </div>
69
  <div class="image-container">
70
+ <p class="instruction">اضغط لتحميل الصورة</p>
71
+ <img src="http://192.168.44.1:8081/3.jpg" alt="صورة 3" data-src="http://192.168.44.1:8081/3.jpg">
 
 
72
  </div>
73
  <div class="image-container">
74
+ <p class="instruction">اضغط لتحميل الصورة</p>
75
+ <img src="http://192.168.44.1:8081/4.jpg" alt="صورة 4" data-src="http://192.168.44.1:8081/4.jpg">
 
 
76
  </div>
77
  </div>
78
 
79
  <script>
80
+ // تخزين الصور في الذاكرة
81
+ const images = document.querySelectorAll('.image-container img');
82
+ const imageBlobURLs = {};
83
+
84
+ images.forEach(img => {
85
+ const src = img.dataset.src;
86
+ fetch(src)
87
+ .then(response => response.blob())
88
+ .then(blob => {
89
+ imageBlobURLs[src] = URL.createObjectURL(blob);
90
+ });
91
+ });
92
+
93
+ // إضافة حدث عند النقر على الصورة
94
+ images.forEach(img => {
95
+ img.addEventListener('click', () => {
96
+ const src = img.dataset.src;
97
+ const link = document.createElement('a');
98
+ link.href = imageBlobURLs[src];
99
+ link.download = src.split('/').pop(); // استخدم اسم الملف عند التحميل
100
+ document.body.appendChild(link);
101
+ link.click();
102
+ document.body.removeChild(link);
103
+ alert("تم تحميل الصورة.");
104
  });
105
  });
106
  </script>