مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
5 مشترك
منتدى الدعم و المساعدة لأحلى المنتديات :: منتدى الدعم والمساعدة :: دعم مشاكل التومبلايت و الأكواد :: أرشيف قسم "مشاكل التومبلايت و الأكواد"
صفحة 1 من اصل 1
مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
السلام عليكم
هنا الاكود و صورة السلايد شو
اريد تركيبه على منتداي
ممكن طريقة
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
مرحبا⊱Queen⊰ كتب:السلام عليكمهنا الاكود و صورة السلايد شواريد تركيبه على منتدايممكن طريقة
طريقة تركيب كود السلايد شو
هناك طربقتان
اولها عن طريق التشكيلات العامة
لوحة الادارة - مظهر المنتدى - الصفحة الرئيسية - تشكيلات عامة
الطريقة الثانية
لوحة الادارة - مظهر المنتدى - التومبلايتات و القوالب - إدارة عامة - overall_footer_end
ابحث عن هذا الكود وضع كود السلايد شو اسفلة مباشرة
- الكود:
<!-- end what's going on box -->
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
دودي. كتب:مرحبا⊱Queen⊰ كتب:السلام عليكمهنا الاكود و صورة السلايد شواريد تركيبه على منتدايممكن طريقة
طريقة تركيب كود السلايد شو
هناك طربقتان
اولها عن طريق التشكيلات العامة
لوحة الادارة - مظهر المنتدى - الصفحة الرئيسية - تشكيلات عامة
الطريقة الثانية
لوحة الادارة - مظهر المنتدى - التومبلايتات و القوالب - إدارة عامة - overall_footer_end
ابحث عن هذا الكود وضع كود السلايد شو اسفلة مباشرة
- الكود:
<!-- end what's going on box -->
تبع HTMAL؟
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
وضعته في تشكيلات لكنه خربلي الاقسام وحتى صندوق ماسي خربه
وجربت وضعته overall_footer_end هون ولساتو مخرب
و وضعته في عناصر مستقلة ومع هيك بقيةرالاقسام مخربة
ارجو تعديل على هذا الكود ولان خطأ فيه مو في CSS
- الكود:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="IMAge" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
</div><!--.row-->
</div><!--.item-->
<div class="item">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
</div><!--.row-->
</div><!--.item-->
<div class="item">
<div class="row">
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
<div class="col-md-3"><a href="#" class="thumbnail"><img src="http://placehold.it/200x145" alt="Image" style="max-width:100%;"></a></div>
</div><!--.row-->
</div><!--.item-->
</div><!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div><!--.Carousel-->
</div>
</div>
</div><!--.container-->
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
مرحبا
- الكود:
<link id="bootstrap-css" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- ---- Include the above in your HEAD tag -------- -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" id="Carousel">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#Carousel">
</li>
<li data-slide-to="1" data-target="#Carousel">
</li>
<li data-slide-to="2" data-target="#Carousel">
</li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
</div>
<!-- .row -->
</div>
<!-- .item -->
<div class="item">
<div class="row">
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
</div>
<!-- .row -->
</div>
<!-- .item -->
<div class="item">
<div class="row">
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
<div class="col-md-3">
<a class="thumbnail" href="#"><img style="max-width:100%;" alt="Image" src="http://placehold.it/250x250" /></a>
</div>
</div>
<!-- .row -->
</div>
<!-- .item -->
</div>
<!-- .carousel-inner --> <a class="left carousel-control" href="#Carousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#Carousel" data-slide="next">›</a>
</div>
<!-- .Carousel -->
</div>
</div>
</div>
<!-- .container --><link id="bootstrap-css" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- ---- Include the above in your HEAD tag -------- -->
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
ضع الكود بالتشكيلات العامه
ضع رابط موقعك للمعاينه
ضع رابط موقعك للمعاينه
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
اففففف
تم الإرسال من خلال التطبيق Topic'it
تم الإرسال من خلال التطبيق Topic'it
R_u- عدد المساهمات : 1
معدل النشاط : 1959
السُمعة : 0
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
أول مساهمة غير مُشجعة نهائياًR_u كتب:اففففف
تم الإرسال من خلال التطبيق Topic'it
طرد 24 ساعة ربما تحسن من سلوكك
![قانون0](/users/1811/68/54/94/smiles/230799.gif)
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
انظر الى كتابة فوق الاقسام كانت عادية بعد وضع هذا الكود تخربة
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
انا طلبت من احد اصدقاء تعديل لي هذا
سانتظر رده
وارجو عدم غلق هذا الموضوع
لحتى لما القى الكود مناسب اضعه للاعضاء ليستفيدو منه
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
اهلا بك يا @⊱Queen⊰ ونعتذر عن التأخير
المشكلة هي ان ملف ال BootStrap الخاص ب css يقوم بتغير خصائص css الخاصة بمنتداكي
جربي السلايد التالي
1. اذا كنتي تريدي ان تظهر السلايد فقط علي الرئيسية فيجب عليكي وضع الكود السابق في بداية قالب الـ index_body
2. لا تنس تغير الصور بأستبدال رابط الصورة الموجود حاليا
https://2img.net/u/3616/17/30/05/avatars/1-18.png
و هكذا ستكون السلايد جاهزة للعرض![tongue](/users/1811/68/54/94/smiles/201477.gif)
المشكلة هي ان ملف ال BootStrap الخاص ب css يقوم بتغير خصائص css الخاصة بمنتداكي
جربي السلايد التالي
اولاً: قم بتعديل علي قالب الـ overall_header
ضع الكود التالي في نهاية القالب- الكود:
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:980px;height:150px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-009-spin" style="position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19px;position:relative;top:50%;width:38px;height:38px;" src="https://gdematerial.ru/images/loader.gif" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:150px;overflow:hidden;">
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
<div>
<img data-u="image" src="https://2img.net/u/3616/17/30/05/avatars/1-18.png" />
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb057" style="position:absolute;bottom:12px;right:12px;" data-autocenter="1" data-scale="0.5" data-scale-bottom="0.75">
<div data-u="prototype" class="i" style="width:16px;height:16px;">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<circle class="b" cx="8000" cy="8000" r="5000"></circle>
</svg>
</div>
</div>
<!-- Arrow Navigator -->
<div data-u="arrowleft" class="jssora073" style="width:50px;height:50px;top:0px;left:30px;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<path class="a" d="M4037.7,8357.3l5891.8,5891.8c100.6,100.6,219.7,150.9,357.3,150.9s256.7-50.3,357.3-150.9 l1318.1-1318.1c100.6-100.6,150.9-219.7,150.9-357.3c0-137.6-50.3-256.7-150.9-357.3L7745.9,8000l4216.4-4216.4 c100.6-100.6,150.9-219.7,150.9-357.3c0-137.6-50.3-256.7-150.9-357.3l-1318.1-1318.1c-100.6-100.6-219.7-150.9-357.3-150.9 s-256.7,50.3-357.3,150.9L4037.7,7642.7c-100.6,100.6-150.9,219.7-150.9,357.3C3886.8,8137.6,3937.1,8256.7,4037.7,8357.3 L4037.7,8357.3z"></path>
</svg>
</div>
<div data-u="arrowright" class="jssora073" style="width:50px;height:50px;top:0px;right:30px;" data-autocenter="2" data-scale="0.75" data-scale-right="0.75">
<svg viewbox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
<path class="a" d="M11962.3,8357.3l-5891.8,5891.8c-100.6,100.6-219.7,150.9-357.3,150.9s-256.7-50.3-357.3-150.9 L4037.7,12931c-100.6-100.6-150.9-219.7-150.9-357.3c0-137.6,50.3-256.7,150.9-357.3L8254.1,8000L4037.7,3783.6 c-100.6-100.6-150.9-219.7-150.9-357.3c0-137.6,50.3-256.7,150.9-357.3l1318.1-1318.1c100.6-100.6,219.7-150.9,357.3-150.9 s256.7,50.3,357.3,150.9l5891.8,5891.8c100.6,100.6,150.9,219.7,150.9,357.3C12113.2,8137.6,12062.9,8256.7,11962.3,8357.3 L11962.3,8357.3z"></path>
</svg>
</div>
</div>
1. اذا كنتي تريدي ان تظهر السلايد فقط علي الرئيسية فيجب عليكي وضع الكود السابق في بداية قالب الـ index_body
2. لا تنس تغير الصور بأستبدال رابط الصورة الموجود حاليا
https://2img.net/u/3616/17/30/05/avatars/1-18.png
ثانيا: قم بالتعديل علي قالب الـ overall_footer_end
قم بالبحث عن كلمة </body> ثم ضع الكود التالي اعلاها مباشرةً- الكود:
<script src="https://omarpop23.github.io/main/jssor.slider-27.5.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
jssor_1_slider_init = function() {
var jssor_1_options = {
$AutoPlay: 1,
$AutoPlaySteps: 5,
$SlideDuration: 160,
$SlideWidth: 200,
$SlideSpacing: 3,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$Steps: 5
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*#region responsive code begin*/
var MAX_WIDTH = 980;
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_1_slider.$ScaleWidth(expectedWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
/*#endregion responsive code end*/
};
</script>
<script type="text/javascript">jssor_1_slider_init();</script>
ثالثا: قم بالتعديل في ورقة الـ CSS
قم بأضافة الكود التالي الي ورقة الـ CSS الخاصه بمنتداك- الكود:
.jssorl-009-spin img {
animation-name: jssorl-009-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/*jssor slider bullet skin 057 css*/
.jssorb057 .i {position:absolute;cursor:pointer;}
.jssorb057 .i .b {fill:none;stroke:#fff;stroke-width:2000;stroke-miterlimit:10;stroke-opacity:0.4;}
.jssorb057 .i:hover .b {stroke-opacity:.7;}
.jssorb057 .iav .b {stroke-opacity: 1;}
.jssorb057 .i.idn {opacity:.3;}
/*jssor slider arrow skin 073 css*/
.jssora073 {display:block;position:absolute;cursor:pointer;}
.jssora073 .a {fill:#ddd;fill-opacity:.7;stroke:#000;stroke-width:160;stroke-miterlimit:10;stroke-opacity:.7;}
.jssora073:hover {opacity:.8;}
.jssora073.jssora073dn {opacity:.4;}
.jssora073.jssora073ds {opacity:.3;pointer-events:none;}
و هكذا ستكون السلايد جاهزة للعرض
![tongue](/users/1811/68/54/94/smiles/201477.gif)
عدل سابقا من قبل omarpop23 في الإثنين 29 أبريل 2019 - 21:32 عدل 1 مرات
رد: مساعدة في تعديل كود سلايد شو جديد احترافي وتلقائي ⊱Queen⊰
تم حل المشكلة & ينقل للأرشيف.
|
![-](https://i.servimg.com/u/f37/19/43/18/14/tabs_l11.gif)
» طلب كود سلايد شو احترافي
» أحتاج كود سلايد شو احترافي
» ممكن كود الاعلانات المتحركة الى بيبفى بجانبها سهمين عند الضغط عليهم تاتى الصورة التالية او السابقة
» اريد مساعدة في وضع كود سلايد شو انا لااعرف كيفية وضعه
» طلب تعديل علي كود جديد مش موجود عند حد ابدا
» أحتاج كود سلايد شو احترافي
» ممكن كود الاعلانات المتحركة الى بيبفى بجانبها سهمين عند الضغط عليهم تاتى الصورة التالية او السابقة
» اريد مساعدة في وضع كود سلايد شو انا لااعرف كيفية وضعه
» طلب تعديل علي كود جديد مش موجود عند حد ابدا
منتدى الدعم و المساعدة لأحلى المنتديات :: منتدى الدعم والمساعدة :: دعم مشاكل التومبلايت و الأكواد :: أرشيف قسم "مشاكل التومبلايت و الأكواد"
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى