أريد تركيب Slideshow لسكربت

**jeltiyassir** · 05-06-2011

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

عندي سكربت المجلة الإسلامية و يدعم rss :

http://www.najahway.com/rss.php

و أريد إضافة slideshow و أحتاج إلى توجيهاتكم و مساعدتكم

أخوكم ياسر

**محمود حسين** · 05-06-2011

وعليكم السلام

هذه الصفحة تحتوي على 25 بلجن slideshow للجيكويري
http://vandelaydesign.com/blog/web-d...age-galleries/
اختر ما يناسبك منها وممكن اساعدك في التركيب

**jeltiyassir** · 05-06-2011

المشاركة الأصلية كتبت بواسطة محمود حسين مشاهدة المشاركة

وعليكم السلام

هذه الصفحة تحتوي على 25 بلجن slideshow للجيكويري
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
اختر ما يناسبك منها وممكن اساعدك في التركيب

شكرا جزيلا لك أخي محمود على سرعة الرد

أعجبني البلوجن الأول

أنتظرك

ملاحظة : مواقعك في التوقيع لا تعمل عندي مند أيام , المزود الخاص بي للإنترنت هو إتصالات المغرب .

**المظفر بالله** · 05-06-2011

المشاركة الأصلية كتبت بواسطة محمود حسين مشاهدة المشاركة

وعليكم السلام

هذه الصفحة تحتوي على 25 بلجن slideshow للجيكويري
http://vandelaydesign.com/blog/web-d...age-galleries/
اختر ما يناسبك منها وممكن اساعدك في التركيب

سبقتني

**محمود حسين** · 05-06-2011

التركيب بسيط وهو يتكون من 3 خطوات:
1- اضف الكود التالي بين الوسمين <head> و </head>

كود:

<style type="text/css">
body {
	background: #1d1d1d;
	margin: 0; padding: 0;
	font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
h1 {
	font: 3em normal Georgia, "Times New Roman", Times, serif;
	color: #fff;
	text-align: center;
	background: url(h1_bg.gif) no-repeat;
	text-indent: -99999px;
	margin: 100px 0 10px;
}
.container {
	overflow: hidden;
	width: 900px;
	margin: 0 auto;
}
#main {
	padding: 10px;
	background: #f0f0f0;
	border: 1px solid #ccc;
}
a {color: #fff;}

/*--Main Image Preview--*/
.main_image {
	width: 598px; height: 456px;
	float: left;
	background: #333;
	position: relative;
	overflow: hidden;
	color: #fff;
}
.main_image h2 {
	font-size: 2em;
	font-weight: normal;
	margin: 0 0 5px;	padding: 10px;
}
.main_image p {
	font-size: 1.2em;
	padding: 10px;	margin: 0;
	line-height: 1.6em;
}
.block small { 
	padding: 0 0 0 20px; 
	background: url(icon_calendar.gif) no-repeat 0 center; 
	font-size: 1em; 
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
	position: absolute;
	bottom: 0;	left: 0;
	width: 100%;
	display: none;
}
.main_image .block{
	width: 100%;
	background: #111;
	border-top: 1px solid #000;
}
.main_image a.collapse {
	background: url(btn_collapse.gif) no-repeat left top;
	height: 27px; width: 93px;
	text-indent: -99999px;
	position: absolute; 
	top: -27px; right: 20px; 
}
.main_image a.show {background-position: left bottom;} 


.image_thumb {
	float: left;
	width: 299px;
	background: #f0f0f0;
	border-right: 1px solid #fff;
	border-top: 1px solid #ccc;
}
.image_thumb img {
	border: 1px solid #ccc; 
	padding: 5px; 
	background: #fff; 
	float: left;
}
.image_thumb ul {
	margin: 0; padding: 0;
	list-style: none;
}
.image_thumb ul li{
	margin: 0; padding: 12px 10px;
	background: #f0f0f0 url(nav_a.gif) repeat-x;
	width: 279px;
	float: left;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #fff;
	border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
	background: #ddd;
	cursor: pointer;
}
.image_thumb ul li.active {
	background: #fff;
	cursor: default;
}
html .image_thumb ul li h2 {
	font-size: 1.5em; 
	margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
	float: left; 
	margin-left: 10px;
	padding: 0;
	width: 170px;
}	
.image_thumb ul li p{display: none;}



</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js?ver=3.1.3"></script>
<script type="text/javascript">
$(document).ready(function() {	

	//Show Banner
	$(".main_image .desc").show(); //Show Banner
	$(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

	//Click and Hover events for thumbnail list
	$(".image_thumb ul li:first").addClass('active'); 
	$(".image_thumb ul li").click(function(){ 
		//Set Variables
		var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
		var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
		var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
		var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	
		
		if ($(this).is(".active")) {  //If it's already active, then...
			return false; // Don't click through
		} else {
			//Animate the Teaser				
			$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
				$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
				$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
			});
		}
		
		$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
		$(this).addClass('active');  //add class of 'active' on this list only
		return false;
		
	}) .hover(function(){
		$(this).addClass('hover');
		}, function() {
		$(this).removeClass('hover');
	});
			
	//Toggle Teaser
	$("a.collapse").click(function(){
		$(".main_image .block").slideToggle();
		$("a.collapse").toggleClass("show");
	});
	
});//Close Function
</script>

2- ثم مكان السلايد شو نفسه تضع الكود التالي:

كود PHP:


<div id="main" class="container">

    <div class="main_image">

        <img src="banner1.jpg" alt="- banner1" />

        <div class="desc">

            <a href="#" class="collapse">Close Me!</a>



            <div class="block">

                <h2>Slowing Down</h2>

                <small>04/10/09</small>

                

                <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn Jones</a> </p>

            </div>

        </div>



    </div>

    <div class="image_thumb">

        <ul>

            <li>

                <a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow" /></a>

                <div class="block">

                    <h2>Slowing Down</h2>

                    <small>04/10/09</small>



                    

                    <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/slowingdown.html" target="_blank">Artwork By Glenn Jones</a> </p>

                </div>

            </li>

            <li>

                <a href="banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight" /></a>

                <div class="block">

                    <h2>Organized Food Fight</h2>



                    <small>04/11/09</small>

                    <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.</p>

                    <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/orfofi.html" target="_blank">Artwork By Glenn Jones</a></p>

                </div>

            </li>

            <li>

                <a href="banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species" /></a>



                <div class="block">

                    <h2>Endangered Species</h2>

                    <small>04/12/09</small>

                    <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/ensp.html" target="_blank">Artwork By Glenn Jones</a></p>

                </div>

            </li>

            <li>



                <a href="banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution" /></a>

                <div class="block">

                    <h2>Evolution</h2>

                    <small>04/13/09</small>

                    <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et.<br /><a href="http://store.glennz.com/evolution.html" target="_blank">Artwork By Glenn Jones</a></p>

                </div>



            </li>

            <li>

                <a href="banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter" /></a>

                <div class="block">

                    <h2>Puzzled Putter</h2>

                    <small>04/14/09</small>

                    <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem. Neo nostrud letatio aliquam validus eum quadrum, volutpat et. <br /><a href="http://store.glennz.com/puzzledputter.html" target="_blank">Artwork By Glenn Jones</a></p>



                </div>

            </li>

            <li>

                <a href="banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit" /></a>

                <div class="block">

                    <h2>Secret Habit</h2>

                    <small>04/15/09</small>

                    <p>Autem conventio nimis quis ad, nisl secundum sed, facilisi, vicis augue regula, ratis, autem.<br /><a href="http://store.glennz.com/secrethabit1.html" target="_blank">Artwork By Glenn Jones</a></p>



                </div>

            </li>

        </ul>

    </div>

</div>

3- في الكود السابق ستحتاج ان تستبدل ما بداخل كل <li> بالداتا الحقيقية القادمة من موقعك ، مثلا آخر 5 مقالات

**محمود حسين** · 06-06-2011

المشاركة الأصلية كتبت بواسطة jeltiyassir مشاهدة المشاركة

ملاحظة : مواقعك في التوقيع لا تعمل عندي مند أيام , المزود الخاص بي للإنترنت هو إتصالات المغرب .

غريبة منذ أيام! طيب ممكن تخبرني هل تعمل الآن مع الشكر

**jeltiyassir** · 06-06-2011

المشاركة الأصلية كتبت بواسطة المظفر بالله مشاهدة المشاركة

سبقتني

شكرا لك أخي المظفر

المشاركة الأصلية كتبت بواسطة محمود حسين مشاهدة المشاركة

غريبة منذ أيام! طيب ممكن تخبرني هل تعمل الآن مع الشكر

الآن تعمل مواقعك

قمت بتعديل الكود , هل يوجد من خطأ ؟ :

كود PHP:


<?
$sql = @mysql_query("SELECT id,sub,date,vis,cat FROM news where active='1' order by id desc limit 0,5");
$xx = mysql_num_rows($sql);
echo"
<div id='main' class='container'>
    <div class='main_image'>
        <img src='".$image."' alt='".$name."' />
        <div class='desc'>
        <a href='".$l."' class='collapse'>'.$name.'</a>

            <div class='block'>
                <h2>'".$name."'</h2>
                <small>'.$d.'</small>
                
                <p>'.$short.'<br /><a href='".$l."'>'.$name.'</a> </p>
            </div>
        </div>

    </div>
    <div class='image_thumb'>
        <ul>
";
while ($row = mysql_fetch_array($sql))
{
$l = "news-$row[id].html";
$name = text(3,$row['sub']);
$d = date("j/n/Y",$row['date']);
$v = $row['vis'];
$short = $row['short'];
$image = $row['image'];
$thumbs = $row['thumbs'];

echo"
        <li>
                <a href='".$image."'><img src='".$thumbs."' alt='".$name."' /></a>
                <div class='block'>
                    <h2>'.$name.'</h2>
                    <small>'.$d.'</small>
                    <p>'.$short.'<br /><a href='".$l."'>'.$name.'</a></p>

                </div>
            </li>
";
}
echo"
</ul>
    </div>
</div>  
";

?>

**jeltiyassir** · 06-06-2011

أعلم أنه به أخطاء لاكني مللت من تصحيح الكود سيما و أن دهني مشوش كثيرا جدا

رجاءا المساعدة لو أمكن و شكرا

**jeltiyassir** · 07-06-2011

قمت بإصلاح المشكل و عمل الكود :

كود:

<html>
<head>
<style type="text/css">
body {
    background: #1d1d1d;
    margin: 0; padding: 0;
    font: 10px normal Arial, Helvetica, sans-serif;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
h1 {
    font: 3em normal Georgia, "Times New Roman", Times, serif;
    color: #fff;
    text-align: center;
    background: url(h1_bg.gif) no-repeat;
    text-indent: -99999px;
    margin: 100px 0 10px;
}
.container {
    overflow: hidden;
    width: 900px;
    margin: 0 auto;
}
#main {
    padding: 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
}
a {color: #fff;}

/*--Main Image Preview--*/
.main_image {
    width: 598px; height: 456px;
    float: left;
    background: #333;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.main_image h2 {
    font-size: 2em;
    font-weight: normal;
    margin: 0 0 5px;    padding: 10px;
}
.main_image p {
    font-size: 1.2em;
    padding: 10px;    margin: 0;
    line-height: 1.6em;
}
.block small { 
    padding: 0 0 0 20px; 
    background: url(icon_calendar.gif) no-repeat 0 center; 
    font-size: 1em; 
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
    position: absolute;
    bottom: 0;    left: 0;
    width: 100%;
    display: none;
}
.main_image .block{
    width: 100%;
    background: #111;
    border-top: 1px solid #000;
}
.main_image a.collapse {
    background: url(btn_collapse.gif) no-repeat left top;
    height: 27px; width: 93px;
    text-indent: -99999px;
    position: absolute; 
    top: -27px; right: 20px; 
}
.main_image a.show {background-position: left bottom;} 


.image_thumb {
    float: left;
    width: 299px;
    background: #f0f0f0;
    border-right: 1px solid #fff;
    border-top: 1px solid #ccc;
}
.image_thumb img {
    border: 1px solid #ccc; 
    padding: 5px; 
    background: #fff; 
    float: left;
}
.image_thumb ul {
    margin: 0; padding: 0;
    list-style: none;
}
.image_thumb ul li{
    margin: 0; padding: 12px 10px;
    background: #f0f0f0 url(nav_a.gif) repeat-x;
    width: 279px;
    float: left;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
    background: #ddd;
    cursor: pointer;
}
.image_thumb ul li.active {
    background: #fff;
    cursor: default;
}
html .image_thumb ul li h2 {
    font-size: 1.5em; 
    margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
    float: left; 
    margin-left: 10px;
    padding: 0;
    width: 170px;
}    
.image_thumb ul li p{display: none;}



</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js?ver=3.1.3"></script>
<script type="text/javascript">
$(document).ready(function() {    

    //Show Banner
    $(".main_image .desc").show(); //Show Banner
    $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

    //Click and Hover events for thumbnail list
    $(".image_thumb ul li:first").addClass('active'); 
    $(".image_thumb ul li").click(function(){ 
        //Set Variables
        var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
        var imgDesc = $(this).find('.block').html();     //Get HTML of block
        var imgDescHeight = $(".main_image").find('.block').height();    //Calculate height of block    
        
        if ($(this).is(".active")) {  //If it's already active, then...
            return false; // Don't click through
        } else {
            //Animate the Teaser                
            $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
                $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,    marginBottom: "0" }, 250 );
                $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
            });
        }
        
        $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
        $(this).addClass('active');  //add class of 'active' on this list only
        return false;
        
    }) .hover(function(){
        $(this).addClass('hover');
        }, function() {
        $(this).removeClass('hover');
    });
            
    //Toggle Teaser
    $("a.collapse").click(function(){
        $(".main_image .block").slideToggle();
        $("a.collapse").toggleClass("show");
    });
    
});//Close Function
</script>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">
</head>
<body>
<?php
session_start();
include("connect.php");
include("includes/func_news.php");

$sql = @mysql_query("SELECT id,sub,date,short,image,thumbs FROM news where active='1' order by id desc limit 0, 5");
$xx = mysql_num_rows($sql);
$row = mysql_fetch_array($sql);
$l = "news-$row[id].html";
$name = text(3,$row['sub']);
$d = date("j/n/Y",$row['date']);
$short = $row['short'];
$image = $row['image'];
$thumbs = $row['thumbs'];
echo"<div id='main' class='container'>
    <div class='main_image'>
        <img src=$image alt=$name/>
        <div class='desc'>
        <a href=$l class='collapse'>$name</a>

            <div class='block'>
                <h2>$name</h2>
                <small>$d</small>
                
                <p>$short<br /><a href=$l>$name</a> </p>
            </div>
        </div>

    </div>
    <div class='image_thumb'>
        <ul>";
while ($row = mysql_fetch_array($sql))
{
$l = "news-$row[id].html";
$name = text(3,$row['sub']);
$d = date("j/n/Y",$row['date']);
$short = $row['short'];
$image = $row['image'];
$thumbs = $row['thumbs'];

echo "

        <li>
        <div class='block'>
                    <h2>$name</h2>
                    <small>$d</small>
                    <p>$short<br /><a href=$l>$name</a></p>
                </div>
                <a href=$image><img src=$thumbs alt=$name width=85 height=85 /></a>
            </li>
 
";
}
?>
</ul>
</div>
</div>
</body>
</html>

بقي مشكل واحد : http://www.najahway.com/lastnews.php
عندما تختار خبر آخر من القائمة الجانبية لا تظهر الصورة في القائمة الرئيسية !!

أتمنى المساعدة

**jeltiyassir** · 08-06-2011

المشاركة الأصلية كتبت بواسطة محمود حسين مشاهدة المشاركة

غريبة منذ أيام! طيب ممكن تخبرني هل تعمل الآن مع الشكر

أخي محمود رجاءا المساعدة لو أمكن

**محمود حسين** · 08-06-2011

المشاركة الأصلية كتبت بواسطة jeltiyassir مشاهدة المشاركة

أخي محمود رجاءا المساعدة لو أمكن

عذرا للتأخر بالرد
أعتقد انه المشكلة في عدم استخدام الأقواس quotation داخل الوسوم a و img

**jeltiyassir** · 08-06-2011

المشاركة الأصلية كتبت بواسطة محمود حسين مشاهدة المشاركة

عذرا للتأخر بالرد
أعتقد انه المشكلة في عدم استخدام الأقواس quotation داخل الوسوم a و img

هل تقصد " أو ' ؟

**محمود حسين** · 08-06-2011

المشاركة الأصلية كتبت بواسطة jeltiyassir مشاهدة المشاركة

هل تقصد " أو ' ؟

بالضبط

**jeltiyassir** · 09-06-2011

المشاركة الأصلية كتبت بواسطة محمود حسين مشاهدة المشاركة

بالضبط

قمت بالتصحيح ولا زال المشكل !

**jeltiyassir** · 09-06-2011

تم حل المشكل , شكرا جزيلا لك أخي محمود .

هذا هو الكود لمن أراد الإستفادة منه :

كود:

<html>
<head>
<style type="text/css">
body {
    background: #1d1d1d;
    margin: 0; padding: 0;
    font: 10px normal Arial;
}
* {margin: 0; padding: 0; outline: none;}
img {border: none;}
h1 {
    font: 3em normal Arial;
    color: #fff;
    text-align: center;
    background: url(h1_bg.gif) no-repeat;
    text-indent: -99999px;
    margin: 100px 0 10px;
}
.container {
    overflow: hidden;
    width: 70%;
    margin: 0 auto;
}
#main {
    padding: 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
}
a {color: #fff;}

/*--Main Image Preview--*/
.main_image {
    width: 60%; height: 480px;
    float: left;
    background: #333;
    position: relative;
    overflow: hidden;
    color: #fff;
}
.main_image h2 {
    font-size: 2em;
    font-weight: normal;
    text-align: right;
    margin: 0 0 5px;    padding: 10px;
}
.main_image p {
    float: right;
    font-size: 13px;
    font: normal Arial;
    padding: 10px;    margin: 0;
    text-align: right;
}
.block small { 
    padding: 0 0 0 20px; 
    background: url(icon_calendar.gif) no-repeat 0 center; 
    font-size: 1em; 
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
    position: absolute;
    bottom: 0;    left: 0;
    width: 100%;
    height: 40%;
    display: none;
}
.main_image .block{
    width: 100%;
    background: #111;
    border-top: 1px solid #000;
}
.main_image a.collapse {
    background: url(btn_collapse.gif) no-repeat left top;
    height: 27px; width: 93px;
    text-indent: -99999px;
    position: absolute; 
    top: -27px; right: 20px; 
}
.main_image a.show {background-position: left bottom;} 


.image_thumb {
    float: right;
    width: 299px;
    background: #f0f0f0;
    border-right: 1px solid #fff;
    border-top: 1px solid #ccc;
}
.image_thumb img {
    border: 1px solid #ccc; 
    padding: 5px; 
    background: #fff; 
    float: right;
}
.image_thumb ul {
    margin: 0; padding: 0;
    list-style: none;
}
.image_thumb ul li{
    margin: 0; padding: 12px 10px;
    background: #f0f0f0 url(nav_a.gif) repeat-x;
    width: 279px;
    float: left;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-right: 1px solid #ccc;
}
.image_thumb ul li.hover {
    background: #ddd;
    cursor: pointer;
}
.image_thumb ul li.active {
    background: #fff;
    cursor: default;
}
html .image_thumb ul li h2 {
    font-size: 15px; 
    text-align: right;
    margin: 5px 0; padding: 0;
}
.image_thumb ul li .block {
    float: right; 
    margin-right: 10px;
    padding: 0;
    width: 170px;
}    
.image_thumb ul li p{display: none;}



</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js?ver=3.1.3"></script>
<script type="text/javascript">
$(document).ready(function() {    

    //Show Banner
    $(".main_image .desc").show(); //Show Banner
    $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity

    //Click and Hover events for thumbnail list
    $(".image_thumb ul li:first").addClass('active'); 
    $(".image_thumb ul li").click(function(){ 
        //Set Variables
        var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
        var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
        var imgDesc = $(this).find('.block').html();     //Get HTML of block
        var imgDescHeight = $(".main_image").find('.block').height();    //Calculate height of block    
        
        if ($(this).is(".active")) {  //If it's already active, then...
            return false; // Don't click through
        } else {
            //Animate the Teaser                
            $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
                $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,    marginBottom: "0" }, 250 );
                $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
            });
        }
        
        $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
        $(this).addClass('active');  //add class of 'active' on this list only
        return false;
        
    }) .hover(function(){
        $(this).addClass('hover');
        }, function() {
        $(this).removeClass('hover');
    });
            
    //Toggle Teaser
    $("a.collapse").click(function(){
        $(".main_image .block").slideToggle();
        $("a.collapse").toggleClass("show");
    });
    
});//Close Function
</script>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1256">
</head>
<body>
<br />
<?php
include("connect.php");
include("includes/func_news.php");
$sql = @mysql_query("SELECT id,sub,date,short,image,thumbs FROM news where active='1' order by id desc limit 0, 6");
$xx = @mysql_num_rows($sql);
$row = @mysql_fetch_array($sql);
$l = "news-$row[id].html";
$name = text(3,$row['sub']);
$d = date("j/n/Y",$row['date']);
$short = $row['short'];
$image = $row['image'];
$thumbs = $row['thumbs'];
echo "<div id='main' class='container'>
    <div class='main_image'>
        <img src='$image' alt='$name' />
        <div class='desc'>
            <a href='$l' class='collapse'>$name</a>

            <div class='block'>   
                    <h2>$name</h2>               
                <p>$short<br /><a href='$l' target='_blank'>$name</a> </p>
            </div>
        </div>

    </div>
    <div class='image_thumb'>
        <ul>";
while ($row = @mysql_fetch_array($sql))
{
$l = "news-$row[id].html";
$name = text(3,$row['sub']);
$d = date("j/n/Y",$row['date']);
$short = $row['short'];
$image = $row['image'];
$thumbs = $row['thumbs'];

echo "

            <li>
                <a href='$image'><img src='$thumbs' alt='$name' width='40' height='40' /></a>
                <div class='block'>
                    <h2>$name</h2>                    
                    <p>$short</p>
                </div>
            </li>
";
}
?>
        </ul>
    </div>
</div> 
</body>
</html>

الموضوع: أريد تركيب Slideshow لسكربت

أدوات الموضوع

بحث في الموضوع

أريد تركيب Slideshow لسكربت

المواضيع المتشابهه

أريد عمل SlideShow بالجافا سكربت (مبتدئ)

أريد تعديل على كود css لسكربت الأخبار ليتناسب مع موقعي

أريد حل والله اني مليت لسكربت 4images

أريد مبرمج محترف لسكربت ( بمبلغ هو يطلبه $$)

ضوابط المشاركة