Sina
5 سال پیش توسط Sina مطرح شد
9 پاسخ

نمایش عکس به همراه متن به صورت تصادفی بعد از رفرش شدن صفحه

سلام
وقت همگی بخیر
من برای صفحه لاگین از یه تیکه کد جی کوئری برای نمایش عکس به صورت تصادفی استفاده میکنم که بعد از هر بار رفرش شدن صفحه یه عکس به صورت رندوم نمایش داده میشه تا اینجا مشکلی وجود نداره و به درستی کار میکنه
حالا میخوام همراه با عکس یک متن که مرتبط با همون عکس هست رو هم نمایش بدم مثلا داخل یه 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);

ممنون میشم بفرمایید به چه صورت میتونم کد رو اصلاح کنم ؟
چند نمونه تو نت بود که زیاد کاربردی نداشت


ثبت پرسش جدید
سید حسین رضوی
تخصص : برنامه نویس وب و طراح رابط کار...
@hossein.r.1442 5 سال پیش مطرح شد
1

ببخشید حواسم نبود اومدم دوبار از تابع استفاده کردم به همون خاطر جابجا استفاده میکنه به این صورت تغییر بدید

$(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');
        });

سید حسین رضوی
تخصص : برنامه نویس وب و طراح رابط کار...
@hossein.r.1442 5 سال پیش مطرح شد
1

ببینید بهترین روش اینه که یه آبجکت بسازید و داخلش آدرس تصویر و متن رو داخل یک آبجکت جدا قرار بدید و بعد راحت استفاده کنید
مثلا یه همچین چیزی

var img = {
    img1:{
        path: '/upload/img01',
        text: 'text01'
    },
    img2: {
        path: '/upload/img02',
        text: 'text02'
    }
}

Sina
@sinayas1 5 سال پیش مطرح شد
0

@hossein.r.1442
ممنون از شما میشه بفرمایید چجوری باید این تکست رو نمایش بدم ؟ یا بهتر بگم از این آرایه استفاده کنم ؟
مثال عملی که وجود داره اینجاست

کنار صفحه یه آیکون i وجود داره که تکست مرتبط با عکس پس زمینه هست
ممنون میشم اگر کد من رو ادیت کنید که بتونم از همون استفاده کنم


سید حسین رضوی
تخصص : برنامه نویس وب و طراح رابط کار...
@hossein.r.1442 5 سال پیش مطرح شد
1

کاری نداره دیگه اینطوری راحت میتونید استفاده کنید

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;

Sina
@sinayas1 5 سال پیش آپدیت شد
0

@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 داده میشه


سید حسین رضوی
تخصص : برنامه نویس وب و طراح رابط کار...
@hossein.r.1442 5 سال پیش مطرح شد
1

برات نوشتم که چطوری به مقدار داخل آبجکت دسترسی داشته باش از اون تابعی که نوشتم باید استفاده کنی

$(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');
        });

اینم دقیقا مثال خودشما همینو استفاده کن کارت راه میوفته


Sina
@sinayas1 5 سال پیش مطرح شد
0

@hossein.r.1442
ممنون از لطف شما
مشکل نمایش برطرف شد الان هم عکس نمایش داده میشه هم متن ولی متن و عکس مرتبط با هم نیستن یعنی وقتی عکس bgl01.jpg نشون داده میشه متن هم باید text01 ولی متن text02 نشون داده میشه


سید حسین رضوی
تخصص : برنامه نویس وب و طراح رابط کار...
@hossein.r.1442 5 سال پیش مطرح شد
1

ببخشید حواسم نبود اومدم دوبار از تابع استفاده کردم به همون خاطر جابجا استفاده میکنه به این صورت تغییر بدید

$(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');
        });

Sina
@sinayas1 5 سال پیش مطرح شد
0

@hossein.r.1442
خیلی خیلی ممنونم از شما لطف کردید مشکل برطف شد.


سید حسین رضوی
تخصص : برنامه نویس وب و طراح رابط کار...
@hossein.r.1442 5 سال پیش مطرح شد
1

برای اینکه آبجکتتون یکم ساده تر بشه میتونید از یه آرایه استفاده کنید که داخلش چند ابجکت داره و نیازی نیست برای هرکدوم از ابجکت ها یک کلید قرار بدید به صورت زیر

var images = [
    {
      path: 'bgl01.jpg',
      caption: 'text01'
    },
    {
      path: 'bgl02.jpg',
      caption: 'text02'
    }
];

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام