لطفا برای تغییر این تگ img بوسیله javascript راهنمایی کنید.

[nekooee]

سلام

لطفا برای تغییر این تگ img بوسیله javascript راهنمایی کنید.

این کد:


<img class="example-image" src="img/demopage/image-1.jpg" alt="image-1"/>


باید تبدیل بشه به این کد:


<a href="img/demopage/image-1.jpg" data-lightbox="test"><img class="example-image" src="img/demopage/image-1.jpg" alt="image-1"/></a>


یعنی یک tag a با href که همان src عکس هست باید به تگ img اضافه بشه. میشه راهنمایی کنید؟

[barnamenevis2016]

سلام....
یک راه اینه که از پیش یک تگ a بسازی ولی بدون شاخص...و بعد بهش شاخصه های مورد نظرتو اضافه کنی
یعنی اول اینو داشته باشی:

<a id='link'><img class="example-image" src="img/demopage/image-1.jpg" alt="image-1"/></a>

و بعد با جاوا بهش شاخص بدی:

document.getElementById('link').setAttribute('href ', "img/demopage/image-1.jpg")
document.getElementById('link').setAttribute('data-lightbox', "test")
البت روش بالا رو ذهنی رفتم..تست نکردم...تستش کن...ببین جواب می ده...
روش دیگه اینه که فقط نگ تصویر رو داشته باشی و بعد با جاوا یک تگ a بسازی و اون تصویر رو لاش جا بدی....
کد جاوا:
اول تگ a و بعد شاخص های مورد نظرتو بهش نسبت می دی...


var a = document.createElement("a");
a.setAttribute("href", "test.php")و بعد می تونی تصویرتو فرزند این تگ بکنی:
a.appendChild( document.getElementById("image") )اونجا می بینی که اسم image رو دادم که اسم id تصویر دلخواهته که مثلا این باشه:
<img id="image" class="example-image" src="images/blog1.jpg" alt="image-1"/>
خوب حالا تصویرت رفته لای و یا فرزند اون تگ a شده...اما حواست باس باشه..الان این تگ a که ساختی یک جورایی روی هواست و جایی معین برای خودس نداره...که باید واسش جا تعیین کنید....فکر کن قبلا یک تگ div داشتی و ساخته بودی که تصویرت توی اون بوده که id او مثلا divId بوده باشه...حالا می آی کد زیر رو می زنی:
var dad = document.getElementById('divId');
dad.appendChild(a);که کد بالا رو در ادامه همون کد بالایی که گفتم می زاری و تگ a رو صاحب پدر می کنی...