الويب العربي - الاخبار المتحركة ديناميكي

الويب العربي (http://www.arabwebtalk.com/index.php)

- مجتمع ديموفنف (http://www.arabwebtalk.com/forumdisplay.php?f=73)

- - الاخبار المتحركة ديناميكي (http://www.arabwebtalk.com/showthread.php?t=113841)

الاخبار المتحركة ديناميكي

[center]

السلام عليكم ورحمة الله وبركاتة

الاخبار المتحركة بطريقه جميله طبعا تم طرحه هنا والان الشرح والتركيب بطريقة سهله جدا

اولا

المثال هنا

- Ԉ߉ 㡊ެ ǡ̤戠- powered by Infinity

مثال آخر
http://www.balmfathl.com

التركيب

حمل من المرفقات اولا

ثانيا
فك الضغط عن الملف
بتظهر لك ثلاث ملفات
وهي

نقوم برفع هذه الملفين
إرفع الملف
jquery-1.2.2.pack.js
والملف
featuredcontentglider.js

داخل ملف

scripts

الأن نرفع الملف الثالث وهو هذا الملف
featuredcontentglider.css

طبعا هذا الملف يرفع داخل ملف الاستايل المطلوب
اذهب الى ملف styles
ثم اختار الستايل الذي تريده مثلا
dciwww

المهم الان
لا تنسى من لوحة التحكم نذهب إلى إعدادات إنفنتي ثم إعدادات الأخبار عدد الأخبار المثبتة الإجمالي ضع مثلا 10

وثبت عشر اخبار او اللذي تريد انت

بعد كذا
نتوجة من لوحة التحكم إلى
النماذج والقوالب
نماذج العرض
قائمة الإستايلات
إضغط على تحرير للإستايل الذي تريد تطبيق
ثم نختار النموذج ccontent من القائمة

لا تنسى خذا نسخه احتياطية

ضع هذا الكود بدله

كود:



<script type="text/javascript" src="http://www.for07.com/scripts/jquery-1.2.2.pack.js"></script>



<head>



<link rel="stylesheet" type="text/css" href="http://www.for07.com/styles/shorog/featuredcontentglider.css" />



<script type="text/javascript" src="http://www.for07.com/scripts/featuredcontentglider.js">



/***********************************************

* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts

* This notice must stay intact for legal use

***********************************************/

</script>

<script type="text/javascript">

featuredcontentglider.init({

        gliderid: "canadaprovinces", //ID of main glider container

        contentclass: "glidecontent", //Shared CSS class name of each glider content

        togglerid: "p-select", //ID of toggler container

        remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable

        selected: 0, //Default selected content index (0=1st)

        persiststate: false, //Remember last content shown within browser session (true/false)?

        speed: 1000, //Glide animation duration (in milliseconds)

        direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "downup"

        autorotate: true, //Auto rotate contents (true/false)?

        autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]

})

</script>

</head>







<!-- START BLOCK : news -->

<div id="welcmsg">الأخبار&nbsp;<img border="0" src="{img_dir}/arrow1.gif" alt=""></div>

<div id="canadaprovinces" class="glidecontentwrapper">

<!-- START BLOCK : stknews -->

<div class="glidecontent" style="position: absolute; left: 10px; top: 13px; width: 470px; height: 170px">

<div id="xsnazzy">

<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>

<div class="xboxcontent">

<div class="rnewstitle">{caption}</div>

<span style='float:left'>&nbsp;{picture}&nbsp;</span><div class="author">&nbsp;&nbsp;{date} م</div><div class="news">&nbsp;{text}&nbsp;

<br><br>

<div id="newsicons"><span style='float:right'><img border="0" src="infimages/newscomment.gif" alt="التعليقات">  {comnum}   |   <img border="0" src="infimages/newssend.gif" alt="إرسال">  {greet}   |   <img border="0" src="infimages/newsviews.gif" alt="الزيارات">  {views}</span><span style='float:left'>{readmore}</span></div>

</div>

</div>

</div>

</div>

<!-- END BLOCK : stknews -->



</div>

<div id="p-select" class="glidecontenttoggler">

<a href="#" class="prev">السابق</a>

<a href="#" class="toc">1</a>

<a href="#" class="toc">2</a>

<a href="#" class="toc">3</a>

<a href="#" class="toc">4</a>

<a href="#" class="toc">5</a>

<a href="#" class="toc">6</a>

<a href="#" class="toc">7</a>

<a href="#" class="toc">8</a>

<a href="#" class="toc">9</a>

<a href="#" class="toc">10</a>

<a href="#" class="next">التالي</a> 

</div>











<table align="center" border="0" width="96%" class="tborder" cellspacing="1" cellpadding="4" {ldir}>

<tr>

<!-- START BLOCK : rownewsa -->

<!-- row1 start-->

<td {clsp} class="rnewstitle" valign="top" width="{width}%">

<span style='float:right'>{picture}</span>{caption}

<div class="author">{date} م</div>

<div class="news">{text}</div>

<div id="newsicons"><span style='float:right'><img border="0" src="infimages/newscomment.gif" alt="التعليقات">  {comnum}   |   <img border="0" src="infimages/newssend.gif" alt="إرسال">  {greet}   |   <img border="0" src="infimages/newsviews.gif" alt="الزيارات">  {views}</span><span style='float:left'>{readmore}</span></div>

</td>

<!-- row1 end-->

{tr}

<!-- START BLOCK : rownewsb -->

<!-- row2 start-->

<td {clsp} class="rnewstitle" valign="top" width="{width}%">

<span style='float:left'>{picture}</span>{caption}

<div class="author">{date} م</div>

<div class="news">{text}</div>

<div id="newsicons"><span style='float:right'><img border="0" src="infimages/newscomment.gif" alt="التعليقات">  {comnum}   |   <img border="0" src="infimages/newssend.gif" alt="إرسال">  {greet}   |   <img border="0" src="infimages/newsviews.gif" alt="الزيارات">  {views}</span><span style='float:left'>{readmore}</span></div>

</td>

<!-- row2 end-->

{tr}

<!-- END BLOCK : rownewsb -->

<!-- END BLOCK : rownewsa -->

</tr>

</table>

</div>

<br>

<!-- END BLOCK : news -->

<div style="width:96%">

<!-- التالي لعرض موديل الكروت -->

<!-- INCLUDE BLOCK : cardmodule -->



<!-- التالي لعرض موديل الصور -->

<!-- INCLUDE BLOCK : albummodule -->



<!-- START BLOCK : centblocks -->

<div id="blocktable">

<!-- START BLOCK : dcblockhead -->

<div class="blocktitle"><span style='float: right'><img border="0" src="{img_dir}/arroww.gif"></span>{title}</div>

<!-- END BLOCK : dcblockhead -->

<!-- START BLOCK : cblockhead -->

{pic}

<!-- END BLOCK : cblockhead -->

<div class="blockcontent">

{cont}

<!-- START BLOCK : cblockfooter -->

</div>

<!-- END BLOCK : cblockfooter -->

</div>

<br>

<!-- END BLOCK : centblocks -->



<!--newcmodule-->



<!-- التالي لعرض موديل المقالات -->

<!-- INCLUDE BLOCK : articlemodule -->



<!-- التالي لعرض موديل الصوتيات -->

<!-- INCLUDE BLOCK : voicemodule -->



<!-- التالي لعرض موديل الفيديو -->

<!-- INCLUDE BLOCK : videomodule -->



<!-- التالي لعرض موديل الجوال -->

<!-- INCLUDE BLOCK : mobilemodule -->



<!-- التالي لعرض موديل الأخبار -->

<!-- INCLUDE BLOCK : newsmodule -->

</div>

الان التعديل بسيط جدا

في اول الكود نجد
<script type="text/javascript" src="http://www.for07.com/scripts/jquery-1.2.2.pack.js"></script>

<head>

<link rel="stylesheet" type="text/css" href="http://www.for07.com/styles/shorog/featuredcontentglider.css" />

<script type="text/javascript" src="http://www.for07.com/scripts/featuredcontentglider.js">

اللي بالون الاحمر ضع رابط موقعك
واللي بالون الاخظر ضع اسم الاستايل اللي عملنا عليه

انتهى

.
.

واخير اتمنى للجميع التوفيق
وانا في خدمة الجميع
اخوكم فهد
- Ԉ߉ 㡊ެ ǡ̤戠- powered by Infinity

رائع ومبدع اخي العزيز فهد

متألق واتوقع ان يكون لك التميز مع برنامج انفنتي

الموضوع موجود ومكرر

على كل حال شكرا لك

إقتباس:

اقتباس من مشاركة alshakicom (المشاركة 632467)

الموضوع موجود ومكرر

على كل حال شكرا لك

ياخوي ادري ان تم طرحه
لكن اعدت التعديل علية

وش كاتب انا اول الموضوع

مشكور اخي الكريم على جهدك وتبسيطك لطريقة الشرح والتفعيل

لأنها قد تكون صعبت على البعض بالشرح الأول فيكون هناك فرصة لتطبيق اكثر من شرح

تحيتي الطيبة لك

جزاك الله خير أخوي فهد على الشرح المبسط .. تم التركيب :)

وبقي لي أن أعدل عليه بعض التعديلات .. إن شاء الله أوفق

بالتوفيق

أرجو المعذرة حصلت لي مشكلة في اختفاء القائمة المنسدلة التي في اليمين .. تحت الأخبار المنزلقة .. لاحظ الصورة :

كيف يمكن تدارك هذا الخطأ ؟

هلا اخوي الحسني

اعطنا رابط الموقع

تفضل أخوي فهد :
http://www.pros3d.com/

مافيها اي مشكله نهائيا
عندي ما يظهر اي خطأ

اخوي يطلع لي لاف يسار ممكن تعدل لي على قالبي الله يسعدك

خلاص اخوي ضبطت معاي ربي يسعدك

إقتباس:

اقتباس من مشاركة فهد2022 (المشاركة 633050)

مافيها اي مشكله نهائيا
عندي ما يظهر اي خطأ

شكراً لك أخي فهد ..
المشكلة واضحة :) حتى عندك في موقعك .. وهو لما تأتي على القائمة اليمنى وتظهر القائمة المنسدلة إلى اليسار تختفي تحت الأخبار المنزلقة .. أنظر للصورة مرة أخرى :

كيف اغير لون اطار الخبر الذي بالازرق وكذلك الارقام الى لون آخر

اتبعت الشرح التالي وظهرت الاخبار المتحركه في الزاوية العلوية اليسرى كما في الصورة التاليه

ارجوا الحل لها

و هذا ملف ccontent الخاص بي الاستايل dciwww

إقتباس:

اقتباس من مشاركة ali_0005 (المشاركة 634299)

اتبعت الشرح التالي وظهرت الاخبار المتحركه في الزاوية العلوية اليسرى كما في الصورة التاليه

ارجوا الحل لها

و هذا ملف ccontent الخاص بي الاستايل dciwww

الان جرب هذا الكود

كود:

<script type="text/javascript" src="http://www.albr-wh.org/scripts/jquery-1.2.2.pack.js"></script>



<head>



<link rel="stylesheet" type="text/css" href="http://www.albr-wh.org/styles/dciwww/featuredcontentglider.css" />



<script type="text/javascript" src="http://www.albr-wh.org/scripts/featuredcontentglider.js">



/***********************************************

* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts

* This notice must stay intact for legal use

***********************************************/

</script>

<script type="text/javascript">

featuredcontentglider.init({

        gliderid: "canadaprovinces", //ID of main glider container

        contentclass: "glidecontent", //Shared CSS class name of each glider content

        togglerid: "p-select", //ID of toggler container

        remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable

        selected: 0, //Default selected content index (0=1st)

        persiststate: false, //Remember last content shown within browser session (true/false)?

        speed: 1000, //Glide animation duration (in milliseconds)

        direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "downup"

        autorotate: true, //Auto rotate contents (true/false)?

        autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]

})



</script>

</head>

<!-- START BLOCK : news -->

<div id="welcmsg">الأخبار&nbsp;<img border="0" src="{img_dir}/arrow1.gif" alt=""></div>

<div id="canadaprovinces" class="glidecontentwrapper"><!-- START BLOCK : stknews --><div class="glidecontent" style="position: absolute; left: 10px; top: 13px; width: 470px; height: 170px">

<div id="xsnazzy">

</div>

<div class="xboxcontent">

<div class="rnewstitle">{caption}</div>

<span style='float:left'>&nbsp;{picture}&nbsp;</span><div class="author">&nbsp;&nbsp;{date} م</div><div class="news">&nbsp;{text}&nbsp;

<br><br>

<div id="newsicons"><span style='float:right'><img border="0" src="infimages/newscomment.gif" alt="التعليقات">  {comnum}   |   <img border="0" src="infimages/newssend.gif" alt="إرسال">  {greet}   |   <img border="0" src="infimages/newsviews.gif" alt="الزيارات">  {views}</span><span style='float:left'>{readmore}</span></div>

</div>

</div>

<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>

</div>



<!-- END BLOCK : stknews -->

</div>

<div id="p-select" class="glidecontenttoggler">

<a href="#" class="prev">السابق</a>

<a href="#" class="toc">1</a>

<a href="#" class="toc">2</a>

<a href="#" class="toc">3</a>

<a href="#" class="toc">4</a>

<a href="#" class="toc">5</a>

<a href="#" class="toc">6</a>

<a href="#" class="toc">7</a>

<a href="#" class="toc">8</a>

<a href="#" class="toc">9</a>

<a href="#" class="toc">10</a>

<a href="#" class="next">التالي</a> 

</div>

<table align="center" border="0" width="96%" class="tborder" cellspacing="1" cellpadding="4" {ldir}>

<tr>

<!-- START BLOCK : rownewsa -->

<!-- row1 start-->

<td {clsp} class="rnewstitle" valign="top" width="{width}%">

<span style='float:right'>{picture}</span>{caption}

<div class="author">{date} م</div>

<div class="news">{text}</div>

<div id="newsicons"><span style='float:right'><img border="0" src="infimages/newscomment.gif" alt="التعليقات">  {comnum}   |   <img border="0" src="infimages/newssend.gif" alt="إرسال">  {greet}   |   <img border="0" src="infimages/newsviews.gif" alt="الزيارات">  {views}</span><span style='float:left'>{readmore}</span></div>

</td>

<!-- row1 end-->

{tr}

<!-- START BLOCK : rownewsb -->

<!-- row2 start-->

<td {clsp} class="rnewstitle" valign="top" width="{width}%">

<span style='float:left'>{picture}</span>{caption}

<div class="author">{date} م</div>

<div class="news">{text}</div>

<div id="newsicons"><span style='float:right'><img border="0" src="infimages/newscomment.gif" alt="التعليقات">  {comnum}   |   <img border="0" src="infimages/newssend.gif" alt="إرسال">  {greet}   |   <img border="0" src="infimages/newsviews.gif" alt="الزيارات">  {views}</span><span style='float:left'>{readmore}</span></div>

</td>

<!-- row2 end-->

{tr}

<!-- END BLOCK : rownewsb -->

<!-- END BLOCK : rownewsa -->

</tr>

</table>

</div>

<br>

<!-- END BLOCK : news -->

<div style="width:96%">

<!-- التالي لعرض موديل الكروت -->

<!-- INCLUDE BLOCK : cardmodule -->



<!-- التالي لعرض موديل الصور -->

<!-- INCLUDE BLOCK : albummodule -->



<!-- START BLOCK : centblocks -->

<div id="blocktable">

<!-- START BLOCK : dcblockhead -->

<div class="blocktitle"><span style='float: right'><img border="0" src="{img_dir}/arroww.gif"></span>{title}</div>

<!-- END BLOCK : dcblockhead -->

<!-- START BLOCK : cblockhead -->

{pic}

<!-- END BLOCK : cblockhead -->

<div class="blockcontent">

{cont}

<!-- START BLOCK : cblockfooter -->

</div>

<!-- END BLOCK : cblockfooter -->

</div>

<br>

<!-- END BLOCK : centblocks -->



<!--newcmodule-->



<!-- التالي لعرض موديل المقالات -->

<!-- INCLUDE BLOCK : articlemodule -->



<!-- التالي لعرض موديل الصوتيات -->

<!-- INCLUDE BLOCK : voicemodule -->



<!-- التالي لعرض موديل الفيديو -->

<!-- INCLUDE BLOCK : videomodule -->



<!-- التالي لعرض موديل الجوال -->

<!-- INCLUDE BLOCK : mobilemodule -->



<!-- التالي لعرض موديل الأخبار -->

<!-- INCLUDE BLOCK : newsmodule -->

</div>

إقتباس:

اقتباس من مشاركة الحسني (المشاركة 633821)

ياخي عندي وعندك مضبوطه
يمكن من متصفحك ؟

نتمنى احد الاخوان يشيك ويعطينا خبر

السلام عليكم ورحمة الله وبركاته

شكل الموقع على اكسبلورر 6 ،

والمشكلة تظهر أحيانا مع الإصدارات المتقدمة من المتصفح

ومع متصفح الفايرفوكس كما بالتالى

أطيب تحية

المشكلة من خاصية الposition الخاصة بالقائمة الرئيسية , ... حاول فعل التالي و انشلءالله تزبط(لم أجربها بنفسي) :

في ملف style.css ابحث عن الكلاس التالي ... :

كود:



#menu ul li {

        position: relative;

        direction: rtl;

}

و أضف له خاصية الz-index وضع لها قيمة عالية 1000 مثلاً كالتالي:

كود:



#menu ul li {

        position: relative;

        direction: rtl;

        z-index:1000;

}

جرب أخي العزيز و ردلنا خبر ...

تم التطبيق هنــــــــا على صحيفة المجمعة الالكترونية يمكنكم المشاهدة

www.al-majmaah.net/inf

شكرا للجميع