کد زوم کردن روی متن و عکس پس از کلیک بر روی ان
سفارش تبليغات در انجــمن قالب گراف ورود به تاپيک اطلاعيه هاي تابستانه قالب گراف
امور گرافيکي و کدنويسي وب خود را به جي جي ميزبان بسپاريد
نام کاربري : پسورد : فراموش

سلام به کاربران رایتم. امروز براتون کد جی کئوری اوردم که واقعا کاربردی هستش، کار این کد این هست که اگر روی متن یا عکسی کلیک کنیم اون متن یا تصویر بزرگ و پشتش تیره می شود.

برای دیدن پیشنمایش زنده این کد کلیک کنید.

کد:
<!--Rightheme.iR Zoomerang Start-->

<script src="https://rozup.ir/up/kamyab4u/codes/zoomerang/zoomerang.js"></script>

<script>

Array.prototype.forEach.call(document.querySelectorAll('p'), function (p, i) {

p.style.marginLeft = i * 6 + '%'

})

Zoomerang

.config({

maxHeight: 400,

maxWidth: 400,

bgColor: '#000',

bgOpacity: .85

})

.listen('.zoom')

</script>

<div style="display:none"><a href="http://rightheme.ir" title="رايتم : مرجع وبمستران ايراني">رايتم : مرجع وبمستران ايراني</a></div>

<!--Rightheme.iR Zoomerang End-->

آموزش: به دلیل کم حجم بودن کد، کد را در قالب تان بگذارید (اگه بخواهید سرعت لود سایت تان بالاتر برود کد را در انتهای قالب بالاتر از قرار دهید). سپس هر عکس یا متنی رو بخواهید بعد از کلیک بر روی ان زوم شود به ان کلاس zoom بدهید به طور مثال:

کسانی که با html اشنایی ندارند شاید دچار مشکل شوند. در هنگام ارسال پست روی گزینه (مشاهده کد HTML) که بیشتر ایکون ان به شکل است کلیک کنید، سپس کد html مطلب را مشاهده میکنید و به متن یا عکس مورد نظر همان طور که توضیح دادم این کلاس را بدهید.

موفق و پیروز باشید.

این اموزش اختصاصی وب سایت رایتم : مرجع وبمستران ایرانی می باشد و هرگونه کپی برداری حتی با ذکر منبع حرام بوده و پیگرد قانونی دارد.

امضاي کاربر :

طراحی و ترجمه قالب - طراحی فایل گرافیکی
وب سایت : www.rightheme.ir
تلگرام : rightheme
ایمیل: rightheme.ir@gmail.com

تشکر شده:

2 کاربر از adminrightheme به خاطر اين مطلب مفيد تشکر کرده اند: whatyouknow / mahdio77 /

پاسخ ها

فقط منبع رو ذکر کردم

امضاي کاربر :

طراحی و ترجمه قالب - طراحی فایل گرافیکی
وب سایت : www.rightheme.ir
تلگرام : rightheme
ایمیل: rightheme.ir@gmail.com

براي نمايش پاسخ جديد نيازي به رفرش صفحه نيست روي تازه سازي پاسخ ها کليک کنيد !