need help to add link in image slide

**shakac** · 6th Mar 2012, 09:24 AM

hello
i got stuck in my project please help me
i want to slideshow image that saved in directory and image name save in database.

i want to add a link for every image in slide but it didn't work.slideshow is ok without link
but when i add link then only 1 image show as slide.
what to do.
here my code

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</script>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>

<title>Simple jQuery Slideshow from JonRaasch.com</title>

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript">

/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>

<style type="text/css">

/*** set the width and height to match your images **/
#slideshow {
    position:relative;
    height:250px;
}

#slideshow IMG {
    position: absolute; 
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

</style>
</head>

<body>
<!-- this will work with any number of images -->
<!-- set the active class on whichever image you want to show up as the default 
(otherwise this will be the last image) -->

<div id="slideshow">
   <?php
error_reporting(E_ALL);
 include("notice/config.php");
$query = "SELECT id, title,body,name FROM notice";
$result = mysql_query($query);
$num = mysql_num_rows($result);
while ($row = mysql_fetch_assoc($result))
{  
echo"<a href='#'><img src=\"../ckfinder/userfiles/images/" . $row['name'] .' "\" alt=\"\" /></a>';
}
?>
</div>
</body>
</html>

please help me

shakac Reviewed by shakac on 6th Mar 2012. need help to add link in image slide hello i got stuck in my project please help me i want to slideshow image that saved in directory and image name save in database. i want to add a link for every image in slide but it didn't work.slideshow is ok without link but when i add link then only 1 image show as slide. what to do. here my code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Rating: 5

**deliteblogger** · 6th Mar 2012, 09:40 AM

There are tons of jQuery slideshow plugins out there, how about trying another one?

**shakac** · 6th Mar 2012, 09:50 AM

please suggest me one that can push from database image
please help me

**Lock Down** · 6th Mar 2012, 02:48 PM

remove the

and

</a>

and it will work fine..

**shakac** · 6th Mar 2012, 05:29 PM

i know that but i want to add a link every image that redirect to other page related to that row.
if i add a link then only one slide is show other image didn't show.
so why this
please help

**Lock Down** · 6th Mar 2012, 10:07 PM

Ok try this:

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>



<title>Simple jQuery Slideshow from JonRaasch.com</title>



<script type="text/javascript" src="jquery-1.2.6.min.js"></script>



<script type="text/javascript">



/*** 

    Simple jQuery Slideshow Script

    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)

***/



function slideSwitch() {

    var $active = $('#slideshow DIV.active');



    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');



    // use this to pull the divs in the order they appear in the markup

    var $next =  $active.next().length ? $active.next()

        : $('#slideshow DIV:first');



    // uncomment below to pull the divs randomly

    // var $sibs  = $active.siblings();

    // var rndNum = Math.floor(Math.random() * $sibs.length );

    // var $next  = $( $sibs[ rndNum ] );





    $active.addClass('last-active');



    $next.css({opacity: 0.0})

        .addClass('active')

        .animate({opacity: 1.0}, 1000, function() {

            $active.removeClass('active last-active');

        });

}



$(function() {

    setInterval( "slideSwitch()", 5000 );

});



</script>



<style type="text/css">



/*** set the width and height to match your images **/



#slideshow {

    position:relative;

    height:400px;

}



#slideshow DIV {

    position:absolute;

    top:0;

    left:0;

    z-index:8;

    opacity:0.0;

    height: 400px;

    background-color: #FFF;

}



#slideshow DIV.active {

    z-index:10;

    opacity:1.0;

}



#slideshow DIV.last-active {

    z-index:9;

}



#slideshow DIV IMG {

    height: 350px;

    display: block;

    border: 0;

    margin-bottom: 10px;

}



</style>



</head>



<body style="font-family: Arial, Sans-serif, sans;">



<!-- this will work with any number of images -->

<!-- set the active class on whichever image you want to show up as the default 

(otherwise this will be the last image) -->



<h1>Simple jQuery Slideshow</h1>

<h2>By <a href="http://jonraasch.com/blog/">Jon Raasch</a></h2>



<div id="slideshow">

<?php

$ctr=1;

$divActive = '<div class="active">';

error_reporting(E_ALL);

 include("notice/config.php");

$query = "SELECT id, title,body,name FROM notice";

$result = mysql_query($query);

$num = mysql_num_rows($result);

while ($row = mysql_fetch_assoc($result))

{  

if ($ctr==1) {echo $divActive;} else {echo "<div>";} 

echo "<a href='#'><img src=\"../ckfinder/userfiles/images/" . $row['name'] .' "\" alt=\"\" /></a></div>';$ctr++;

}

?>

</div>



<p>For more info visit <a href="http://jonraasch.com/blog/a-simple-jquery-slideshow">http://jonraasch.com/blog/a-simple-jquery-slideshow</a></p>



<p>If you like this script, please <a href="**************************cgi-bin/webscr?cmd=_donations&business=4URDTZYUNPV3J&lc=US&item_name=Jon%20Raasch&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted">make a donation</a>

</p>



</body>

</html>

**shakac** · 7th Mar 2012, 12:21 PM

Wow wow
Lock Down your are great great great
thank you very much for solution this.
it's working very good.

i salute you.

and if i want to add a previous and next button to see previous and next slide what to do.
please don't mind.

**Lock Down** · 7th Mar 2012, 03:40 PM

You are welcome.

need help to add link in image slide

Thread Tools

Display

need help to add link in image slide

Sponsored Links

Thread Information

Users Browsing this Thread

Similar Threads

Image Slide Button

Why can't link an image?!

How to add second link to image

Image Resiger - slide tag

Using Slide Option To Fit The Large Image

Tags for this Thread

Posting Permissions

themaLeecher - leech and manage...

themaRegister - register to forums...

themaCreator - create posts from...

themaCreator - create posts from...

themaPoster - post to forums and...