کمک برای ایجاد تغییر در یک اسکریپت

[Arona]

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

حقیقتش من یه سایت دارم که روش از CMS دیتالایف دارم استفاده میکنم ، البته زبان انگلیسی هم هست ، همونطور که میدونید دیتالایف یه ویدجت به اسم Popular news یا در بعضی template ها به اسم Top news نمایش داده میشه ، من از تم دیفالت خود دیتالایف استفاده میکنم و این قسمت به صورت ساده هستش . من میخواستم این Top news رو مثل این سایت که لینکش رو میدم به صورت اسلاید در بیارم :

لینک ها تنها برای اعضای سایت قابل نمایش است.

این رو میدونم که این سایت و سایتهای دیگه که از این اسکریپت استفاده کردن که لینکش اینه :

لینک ها تنها برای اعضای سایت قابل نمایش است.

اینجا تمام کدها و ... هستش تو سایت Dlestarter هم این مشکل رو سوال کردم ولی در حد خیلی محدودی جوابم رو دادن و اصلا کافی نبود . اگه به لینکی که در بالا دادم برید و ببینید این اسکریپت 1 سری کد Css داره ، یه کد javascript و کد HTML .

مشکل اصلی من بر میگرده به CSS که این اسرکیپت کد CSS برای body. داره که خوب فایل Style.css اصلی خود دیتالایف هم این کد رو داره و برای همین وقتی این کد رو تو فایل style.css کپی میکنم کل سایت بهم میریزه چون 2 تا کد body با هم قاطی میشه . اگر هم کد body رو کپی نکنم اصلا چیزی نمایش داده نمیشه از اسکریپت .

مشکل بعدی هم کار نکردن کد جاواست ، نمیدونم حالا شاید چون کدهای CSS درست نیست اینجوری میشه ولی من کدی که تو سایت هست رو هم تو قسمتی که میخوام اسلاید نشون داده بشه و هم در هدر سایت تست کردم وقتی کد body رو هم کپی میکنم این اسلاید دقیقا مثل چیزی که تو سایت نشون داده میشه ظاهر میشه ولی در هدر سایت نه در سایدبار و اصلا اسلاید نمیکنه و فقط تصویر اول رو نشون میده و ثابته ، نمیدونم این دلیلش کار نکردن کد جاواست یا اینکه به خاطر درست نبودن کد CSS هستش که چون محل قرار گیری کد HTML با کد CSS همخونی نداره اینجوری میشه .

میبخشید که زیادی صحبت کردم ، در نهایت کلام ، کسی از دوستان هست کمک کنه و بهم بگه چطوری این سیستم رو ویرایش کنم که بتونم تو قسمت سایدبار سایتم مثل نمونه ایی که در لینک اول نشون دادم استفاده کنم ؟

 

[Mohammad]

برای بخش css نیاز نیست فایل style.css رو بزاری. css اصلی اون اسکریپت به صورت زیر هست

        <style type="text/css" media="all">
            html, #c-carousel {
                height: 100%;
                padding: 0;
                margin: 0;
            }
            #c-carousel {
                min-height: 350px;
            }
            #c-carousel * {
                font-family: Arial, Geneva, SunSans-Regular, sans-serif;
                font-size: 14px;
                color: #333;
                line-height: 22px;
            }

            #wrapper {
                background-color: #F4F0EE;
                border: 1px solid #ccd;
                width: 600px;
                height: 225px;
                padding-top: 25px;
                margin: -125px 0 0 -300px;
                overflow: hidden;
                position: absolute;
                left: 50%;
                top: 50%;
                border-radius: 10px;
            }
            #carousel > div {
                width: 400px;
                padding: 0 100px;
                height: 225px;
                float: left;
                overflow: hidden;
            }
            #carousel img {
                border: none;
                display: block;
                margin: 0 25px 30px 0;
                float: left;
            }
            #carousel h3 {
                font-size: 30px;
                line-height: 30px;
                margin: 20px 0 20px 0;
            }

            #carousel #blue img {
                margin-top: 50px;
            }
            #carousel #pink img {
                margin-top: 20px;
            }
            #carousel #white img {
                margin-top: 60px;
            }

            #source {
                text-align: center;
                width: 400px;
                margin: 0 0 0 -200px;
                position: absolute;
                bottom: 10px;
                left: 50%;
            }
            #source, #source a {
                color: #999;
                font-size: 12px;
            }


        </style>

بعد از اون باید جاوا رو بزاری.

<script type="text/javascript" language="javascript" src="/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="/js/jquery.carouFredSel.js"></script>
<script type="text/javascript" language="javascript">
            $(function() {
                $('#carousel').carouFredSel({
                    items: 1,
                    scroll: {
                        duration: 2500,
                        timeoutDuration: 1500,
                        easing: 'elastic'
                    }
                });
            });
        </script>

کد html رو هم خودت بهتر میدونی

 

[Arona]

آقا محمد دستتون درد نکنه ، یه جورایی درستش کردم ، اما انگار این سایت یه جورایی کاستومایزش کرده ، اول اینکه اسلایدش به سمت بالا میره ، دوم اینکه وقتی موس میره روش اسلاید متوقف میشه و یه توضیح راجبش از یه کادر پایین ظاهر میشه .

لینک ها تنها برای اعضای سایت قابل نمایش است.

اما چیزی که من درستش کردم ، خیلی ابتدایی شده ، به عکسها لینک دادم الان با کلیک روی عکسا تاپیکش باز میشه ولی وقتی موس رو اسلاید میمونه همچنان اسلاید کار میکنه .

لینک ها تنها برای اعضای سایت قابل نمایش است.

من سعی کردم با inspect element بروزر از کاستومایزش سر در بیارم ، فایل JS یکی استفاده میکنه ، تقریبا تمام تغییراتش هم مشخصه اما یه قسمت که دقیقا مشکل سازه مشخص نیست . اگه تو سایت اصلی اسکریپت دقت کنید این کد HTML رو داره :

<div id="carousel">

ولی انگار این قسمت همون بخش اصلی هست که توسط JS کنترل میشه ، و کلا تغییر میکنه و نمیشه CSS هاشو پیدا کرد ، به جاش توی inspect element این رو نشون میده :

<div class="caroufredsel_wrapper" style="display: block; text-align: left; float: none; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: auto; width: 230px; height: 270px; margin: 0px; overflow: hidden;"><div id="top-news" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; height: 5670px; width: 230px; z-index: auto;">

تست کردم و به جای کل این کد رو به جای اصلی گذاشتم ، تصویر و ... درست بود ولی اسلاید کار نمیکرد . خلاصه حسابی گیج شدم و نمیدونم چیکار کنم ، اگه میشه کمکم کنید لطفا

این فایل JS که استفاده میشه :

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

[Arona]

دوستان کسی نبود کمک کنه ؟ اگه کسی میتونه top news این سایت رو برام آماده کنه حاضرم مزدشم بدم ، البته قبلش بهم بگه که ببینم چقدره ، من واقعا به این نیاز دارم . لطفا ، خواهش میکنم ازتون یکیتون کمکم کنه دوستان

لینک ها تنها برای اعضای سایت قابل نمایش است.

 

[Mohammad]

اگر وردپرس بود میتونستم کمک کنم. دیتالایف زیاد مهارت ندارم (چند سالی هست کار نکردم باهاش)