سلام
وقت همگی بخیر
من برای صفحه لاگین از یه تیکه کد جی کوئری برای نمایش عکس به صورت تصادفی استفاده میکنم که بعد از هر بار رفرش شدن صفحه یه عکس به صورت رندوم نمایش داده میشه تا اینجا مشکلی وجود نداره و به درستی کار میکنه
حالا میخوام همراه با عکس یک متن که مرتبط با همون عکس هست رو هم نمایش بدم مثلا داخل یه div یا span
فقط نکته مهم اینه اگه عکس bgl01 نمایش داده میشه مثلا تکست مرتبط با خودش باشه نه اینکه یه تکست رندوم
(function($) {
$(document).ready(function() {
var images = ['bgl01.jpg', 'bgl02.jpg'];
$('body').css({
'background-image': 'url(<?= content_url(""); ?>/uploads/2020/03/' + images[Math.floor(Math.random() * images.length)] + ')'
});
});
})(jQuery);
ممنون میشم بفرمایید به چه صورت میتونم کد رو اصلاح کنم ؟
چند نمونه تو نت بود که زیاد کاربردی نداشت
ببخشید حواسم نبود اومدم دوبار از تابع استفاده کردم به همون خاطر جابجا استفاده میکنه به این صورت تغییر بدید
$(document).ready(function() {
var images = {
img1:{
path: 'bgl01.jpg',
caption: 'text01'
},
img2: {
path: 'bgl02.jpg',
caption: 'text02'
}
};
var randomProperty = function (obj) {
var keys = Object.keys(obj);
return obj[keys[ keys.length * Math.random() << 0]];
};
var img = randomProperty(images);
$('body').css({
'background-image': 'url(<?= content_url(""); ?>/uploads/2020/03/' + img.path + ')'
});
$('<p>' + img.caption + '</p>').appendTo('#backtoblog');
});
ببینید بهترین روش اینه که یه آبجکت بسازید و داخلش آدرس تصویر و متن رو داخل یک آبجکت جدا قرار بدید و بعد راحت استفاده کنید
مثلا یه همچین چیزی
var img = {
img1:{
path: '/upload/img01',
text: 'text01'
},
img2: {
path: '/upload/img02',
text: 'text02'
}
}
@hossein.r.1442
ممنون از شما میشه بفرمایید چجوری باید این تکست رو نمایش بدم ؟ یا بهتر بگم از این آرایه استفاده کنم ؟
مثال عملی که وجود داره اینجاست
کنار صفحه یه آیکون i وجود داره که تکست مرتبط با عکس پس زمینه هست
ممنون میشم اگر کد من رو ادیت کنید که بتونم از همون استفاده کنم
کاری نداره دیگه اینطوری راحت میتونید استفاده کنید
var img = {
img1:{
path: '/upload/img01',
text: 'text01'
},
img2: {
path: '/upload/img02',
text: 'text02'
}
}
var randomProperty = function (obj) {
var keys = Object.keys(obj);
return obj[keys[ keys.length * Math.random() << 0]];
};
var path = randomProperty(img).path;
var text = randomProperty(img).text;
@hossein.r.1442
من کدم رو طبق فرمایش شما به شکل زیر تغییر دادم :
(function($) {
$(document).ready(function() {
var images = {
img1:{
path: 'bgl01.jpg',
caption: 'text01'
},
img2: {
path: 'bgl02.jpg',
caption: 'text02'
}
};
$('body').css({
'background-image': 'url(<?= content_url(""); ?>/uploads/2020/03/' + images[Math.floor(Math.random() * images.length)] + ')'
});
$('<p>' + images.caption + '</p>').appendTo('#backtoblog');
});
})(jQuery);
اما انتهای url عکس undifind میفته به جای bgl01.jpg و برای نمایش کپشن هم پیغام undifind داده میشه
برات نوشتم که چطوری به مقدار داخل آبجکت دسترسی داشته باش از اون تابعی که نوشتم باید استفاده کنی
$(document).ready(function() {
var images = {
img1:{
path: 'bgl01.jpg',
caption: 'text01'
},
img2: {
path: 'bgl02.jpg',
caption: 'text02'
}
};
var randomProperty = function (obj) {
var keys = Object.keys(obj);
return obj[keys[ keys.length * Math.random() << 0]];
};
var path = randomProperty(images).path;
var text = randomProperty(images).caption;
$('body').css({
'background-image': 'url(<?= content_url(""); ?>/uploads/2020/03/' + path + ')'
});
$('<p>' + text + '</p>').appendTo('#backtoblog');
});
اینم دقیقا مثال خودشما همینو استفاده کن کارت راه میوفته
@hossein.r.1442
ممنون از لطف شما
مشکل نمایش برطرف شد الان هم عکس نمایش داده میشه هم متن ولی متن و عکس مرتبط با هم نیستن یعنی وقتی عکس bgl01.jpg نشون داده میشه متن هم باید text01 ولی متن text02 نشون داده میشه
ببخشید حواسم نبود اومدم دوبار از تابع استفاده کردم به همون خاطر جابجا استفاده میکنه به این صورت تغییر بدید
$(document).ready(function() {
var images = {
img1:{
path: 'bgl01.jpg',
caption: 'text01'
},
img2: {
path: 'bgl02.jpg',
caption: 'text02'
}
};
var randomProperty = function (obj) {
var keys = Object.keys(obj);
return obj[keys[ keys.length * Math.random() << 0]];
};
var img = randomProperty(images);
$('body').css({
'background-image': 'url(<?= content_url(""); ?>/uploads/2020/03/' + img.path + ')'
});
$('<p>' + img.caption + '</p>').appendTo('#backtoblog');
});
برای اینکه آبجکتتون یکم ساده تر بشه میتونید از یه آرایه استفاده کنید که داخلش چند ابجکت داره و نیازی نیست برای هرکدوم از ابجکت ها یک کلید قرار بدید به صورت زیر
var images = [
{
path: 'bgl01.jpg',
caption: 'text01'
},
{
path: 'bgl02.jpg',
caption: 'text02'
}
];
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟