Update public/js/add_content.js

public/js/add_content.js

@@ -74,6 +74,19 @@ function addcontent(item) {
 
     // Salam: 
     // Add this line to define sdgImageHTML
+    var sdgProjectHTML = '';
+    if ('sdgImage' in item.item) {
+    var sdgProjectLink = item.sdgImage;
+    var customColor = '#8A2BE2';
+
+    sdgProjectHTML = `<a class="sdg-button btn btn-sm btn-outline-" style="color: ${customColor}; border-color: ${customColor};" 
+                        href="javascript:void(0);" 
+                        onclick="toggleImage('${sdgProjectLink}');"
+                        onmouseover="hoverEffect(this, 'white', '#8A2BE2');" 
+                        onmouseout="hoverEffect(this, '${customColor}', 'white');">
+                        SDG Projekt
+                    <img id="sdgImage" src="" alt="SDG Project Image" style="max-width: 100%; max-height: 100%; display: none;"> </a> &nbsp;`;
+
    /* var sdgProjectHTML = '';
     if ('sdgImage' in item) {
     var sdgProjectLink = item.sdgImage;
@@ -82,13 +95,13 @@ function addcontent(item) {
     sdgProjectHTML = `<a class="btn btn-sm btn-outline- mt-1" style="color: ${customColor}; border-color: ${customColor};" href="${sdgProjectLink}" target="_blank"> <i class="fas fa-sdg"></i> SDG Project</a> &nbsp;`;
     }*/
     //-- debut
-    var sdgProjectHTML = '';
-    if ('sdgImage' in item) {
-    var sdgProjectLink = item.item.sdgImage;
+    /*var sdgProjectHTML = '';
+    if ('sdgImage' in item.item) {
+    var sdgProjectLink = item.sdgImage;
     var customColor = '#8A2BE2';
-    //var imageSize = '5px'; // Adjust this value to your desired size
+    
 
-    sdgProjectHTML = `<a class="btn btn-sm btn-outline- mt-1" style="color: ${customColor}; border-color: ${customColor};" href="javascript:void(0);" onclick="document.querySelector('.btn-outline- img').src='${sdgProjectLink}'; document.querySelector('.btn-outline- img').alt='SDG Project Image'; document.querySelector('.btn-outline- img').onclick=function(){window.open('${sdgProjectLink}', '_blank');}"><img src="imgs/thumbnails/SDG-HFT.png" alt="SDG Project Image" class="btn-outline-" style="max-width:100px ; max-height:60px;"></a> &nbsp;`;
+    sdgProjectHTML = `<a class="btn btn-sm btn-outline- mt-1" style="color: ${customColor}; border-color: ${customColor};" href="javascript:void(0);" onclick="document.querySelector('.btn-outline- img').src='${sdgProjectLink}'; document.querySelector('.btn-outline- img').alt='SDG Project Image'; document.querySelector('.btn-outline- img').onclick=function(){window.open('${sdgProjectLink}', '_blank');}"><img src="imgs/thumbnails/SDG-HFT.png" alt="SDG Project Image" class="btn-outline-" style="max-width:100px ; max-height:60px;"></a> &nbsp;`;*/
 
     // Add a JavaScript function to change the image and open the link
    /* sdgProjectHTML += `
@@ -197,3 +210,18 @@ function addTeam(item) {
     new_row.innerHTML = new_row.innerHTML + html_team
   }
 }
+function toggleImage(imageLink) {
+    var imageElement = document.getElementById('sdgImage');
+    if (imageElement.src === imageLink) {
+        imageElement.src = '';
+        imageElement.alt = '';
+    } else {
+        imageElement.src = imageLink;
+        imageElement.alt = 'SDG Project Image';
+    }
+}
+
+function hoverEffect(element, color, textColor) {
+    element.style.backgroundColor = color;
+    element.style.color = textColor;
+}