Learn VBA & Macros in 1 Week!

PHP - Need Help With Slider

Full Excel VBA Course - Beginner to Expert

Need Help With Slider	View Content

I bought a slider script and need to merge it in the website. What is the best to put the script in the header or in the footer?
And where i have to put it on wich line? I tried a lot and i have almost no more hair left on my head! One time i managed to get the images below header but not in a slider, it added the images below each other. It's not loading jquery or something else i don't know...
this is the slider script:
<?php echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR...1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>JQuery-Image-Slider</title>
<link href=\"css/default.css\" rel=\"stylesheet\" type=\"text/css\" />
<script src=\"js/jquery.js\" type=\"text/javascript\"></script>
<script src=\"js/yslider.js\" type=\"text/javascript\"></script>
<script src=\"js/init.js\" type=\"text/javascript\"></script>
</head>

<body>
<div id=\"content\">
<div class=\"slider\">
<div class=\"sliderContent\">
<div class=\"item\"> <img src=\"img/img1.jpg\" alt=\"\" /> </div>
<div class=\"item\"> <img src=\"img/img2.jpg\" alt=\"\" /> </div>
<div class=\"item\"> <img src=\"img/img3.jpg\" alt=\"\" /> </div>
<div class=\"item\"> <img src=\"img/img4.jpg\" alt=\"\" /> </div>
<div class=\"item\"> <img src=\"img/img5.jpg\" alt=\"\" /> </div>
<div class=\"item\"> <img src=\"img/img6.jpg\" alt=\"\" /> </div>
</div>
</div>
</div>
</body>
</html>
"; ?> The header and footer script are atached Attached Files footer.php 3.26KB 0 downloads header.php 16.48KB 0 downloads

Full Excel VBA Course - Beginner to Expert

Php Image Slider Help

Similar Tutorials

View Content

I have an image slider i am trying to edit. Currently i can only make it display only 1 continuios line of images that disapears. What i am trying to get, is an overflow feature that allows the images to start a new line instead of only one line. here is the code.

PHP Code:

(function($) {
   $.fn.loopedCarousel = function(options) {

   var defaults = {
      container: '.container',
      slides: '.slides',
      pagination: '.pagination',
      autoStart: 0, // Set to positive number for auto interval and interval time
      slidespeed: 300, // Speed of slide animation
      fadespeed: 300, // Speed of fade animation
      items: 6, // Items show
      padding: 26, // Padding between items
      showPagination: false, // Shows pagination links
      vertical: false
   };

   this.each(function() {
      var obj = $(this);
      var o = $.extend(defaults, options);
      var i = o.items;
      var m = 0;
      var t = 1;
      var s = $(o.slides,obj).children().size();
      var w = $(o.slides,obj).children().outerWidth()+o.padding;
      var h = $(o.slides,obj).children().outerHeight()+o.padding;
      var c = Math.ceil($(o.slides,obj).children().size()/i);
      var pd = o.padding/2;
      var p = 0;
      var u = false;
      var n = 0;
      var pt = 0;
      var os = i*c-s;
      var params = {};

      if (o.vertical===true) { w = h; }

      if(o.showPagination){
         var buttons = s/i;
         $(obj).append('<ul class="pagination">');
         $(o.slides,obj).children().each(function(){
            if (n<buttons) {
               $(o.pagination,obj).append('<li><a rel="'+(n+1)+'" href="#" >'+(n+1)+'</a></li>');
               n = n+1;
            } else {
               n = 0;
               return false;
            }
            $(o.pagination+' li a:eq(0)',obj).parent().addClass('active');
         });
      }

      if (o.vertical===true) {
         $(o.container,obj).css({height:(w*i)});
         $(o.slides,obj).css({height:(s*w)});
      } else {
         $(o.container,obj).css({width:(w*i)});
         $(o.slides,obj).css({width:(s*w)});
      }

      $(o.slides,obj).children().each(function(){
         if (o.vertical===true) {
            $(this).css({position:'absolute',top:p+pd,display:'block'});
         } else {
            $(this).css({position:'absolute',left:p+pd,display:'block'});
         }
         p=p+w;
      });

      $(o.slides,obj).children().each(function(){
         pt = pt+1;
         if (pt<i+1) {
            params[o.vertical ? 'top' : 'left'] = (-w*pt)+pd-(w*os);
            $(o.slides,obj).children(':eq('+(s-pt)+')').css(params);
         }
         if (pt===i+2) {
            pt = 0;
            return false;
         }
      });

      $('.next',obj).click(function(){
         if(u===false) {
            animate('next',true);
            if(o.autoStart){clearInterval(sliderIntervalID);}
         }
         return false;
      });

      $('.previous',obj).click(function(){
         if(u===false) {
            animate('prev',true);
            if(o.autoStart){clearInterval(sliderIntervalID);}
         } return false;
      });

      $(o.pagination+' li a',obj).click(function(){
         if ($(this).parent().hasClass('active')) {return false;}
         else {
            t = $(this).attr('rel');
            $(o.pagination+' li a',obj).parent().siblings().removeClass('active');
            $(this).parent().addClass('active');
            animate('fade',t);
            if(o.autoStart){clearInterval(sliderIntervalID);}
         } return false;
      });

      if (o.autoStart) {
         sliderIntervalID = setInterval(function(){
            if(u===false) {animate('next',true);}
         }, o.autoStart);
      }

      function current(t) {
         if(t===c+1){t=1;}
         if(t===0){t=c;}
         $(o.pagination+' li a',obj).parent().siblings().removeClass('active');
         $(o.pagination+' li a[rel="' + (t) + '"]',obj).parent().addClass('active');
      }

      function animate(dir,clicked){
         u = true;
         switch(dir){
            case 'next':
               t = t+1;
               m = (-(t*w-w)*i);
               current(t);
               params[o.vertical ? 'top' : 'left'] = m;
               $(o.slides,obj).animate(params, o.slidespeed,function(){
                  if (t===c+1) {
                     t = 1;
                     params[o.vertical ? 'top' : 'left'] = 0;
                     $(o.slides,obj).css(params,function(){
                        $(o.slides,obj).animate(params);
                     });
                     $(o.slides,obj).children().each(function(){
                        if (pt<i) {
                           params[o.vertical ? 'top' : 'left'] = (w*pt)+pd;
                           $(o.slides,obj).children(':eq('+pt+')').css(params);
                           params[o.vertical ? 'top' : 'left'] = -(w*(pt+os+1)-pd);
                           $(o.slides,obj).children(':eq('+(s-(pt+1))+')').css(params);
                        } else {
                           pt = 0;
                           return false;
                        }
                        pt = pt+1;
                     });
                  }
                  if (t===c) {
                     $(o.slides,obj).children().each(function(){
                        if (pt<i) {
                           params[o.vertical ? 'top' : 'left'] = w*(s+pt+os)+pd;
                           $(o.slides,obj).children(':eq('+(pt)+')').css(params);
                        } else {
                           pt = 0;
                           return false;
                        }
                        pt = pt+1;
                     });
                  }
                  if (t===2) {
                     $(o.slides,obj).children().each(function(){
                        pt = pt+1;
                        if (pt<i+1) {
                           params[o.vertical ? 'top' : 'left'] = ((w*s)+pd)-(w*pt);
                           $(o.slides,obj).children(':eq('+(s-pt)+')').css(params);
                        } else {
                           pt = 0;
                           return false;
                        }
                     });
                  }
                  u = false;
               });
               break;
            case 'prev':
               t = t-1;
               m = (-(t*w-w)*i);
               current(t);
               params[o.vertical ? 'top' : 'left'] = m;
               $(o.slides,obj).animate(params, o.slidespeed,function(){
                  if (t===0) {
                     t = c;
                     params[o.vertical ? 'top' : 'left'] = -w*(s-i)-(w*os);
                     $(o.slides,obj).css(params);
                     $(o.slides,obj).children().each(function(){
                        if (pt<i) {
                           params[o.vertical ? 'top' : 'left'] = w*(s+pt+os)+pd;
                           $(o.slides,obj).children(':eq('+pt+')').css(params);
                           params[o.vertical ? 'top' : 'left'] = (s*w)+pd-(pt*w)-w;
                           $(o.slides,obj).children(':eq('+((s-1)-pt)+')').css(params);
                        } else {
                           pt = 0;
                           return false;
                        }
                        pt = pt+1;
                     });
                  }
                  if (t===2) {
                     $(o.slides,obj).children().each(function(){
                        if (pt<i) {
                           params[o.vertical ? 'top' : 'left'] = (w*pt)+pd;
                           $(o.slides,obj).children(':eq('+pt+')').css(params);
                        } else {
                           pt = 0;
                           return false;
                        }
                        pt = pt+1;
                     });
                  }
                  if (t===1) {
                     $(o.slides,obj).children().each(function(){
                        if (pt<i) {
                           params[o.vertical ? 'top' : 'left'] = -(w*pt)-w+pd-(w*os);
                           $(o.slides,obj).children(':eq('+((s-1)-pt)+')').css(params);
                        } else {
                           pt = 0;
                           return false;
                        }
                        pt = pt+1;
                     });
                  }

                  u = false;
               });
               break;
            case 'fade':
               t = [t]*1;
               m = (-(t*w-w)*i);
               current(t);
               $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                  params[o.vertical ? 'top' : 'left'] = m;
                  $(o.slides,obj).css(params);
                  $(o.slides,obj).children().each(function(){
                     if (pt<i) {
                        params[o.vertical ? 'top' : 'left'] = (pt*w)+pd;
                        $(o.slides,obj).children(':eq('+pt+')').css(params);
                        params[o.vertical ? 'top' : 'left'] = w*(s-pt)-w+pd;
                        $(o.slides,obj).children(':eq('+((s-1)-pt)+')').css(params);
                     } else {
                        pt = 0;
                        return false;
                     }
                     pt = pt+1;
                  });

                  if(t===c){
                     $(o.slides,obj).children().each(function(){
                        if (pt<i) {
                           params[o.vertical ? 'top' : 'left'] = w*(s+pt+os)+pd;
                           $(o.slides,obj).children(':eq('+(pt)+')').css(params);
                        } else {
                           pt = 0;
                           return false;
                        }
                        pt = pt+1;
                     });
                  }
                  if(t===1){
                     $(o.slides,obj).children().each(function(){
                        pt = pt+1;
                        if (pt<i+1) {
                           params[o.vertical ? 'top' : 'left'] = -(w*pt)+pd-(w*os);
                           $(o.slides,obj).children(':eq('+(s-pt)+')').css(params);
                        } else {
                           pt = 0;
                           return false;
                        }
                     });
                  }
                  $(o.slides,obj).children().fadeIn(o.fadespeed);
                  u = false;
               });
               break;
            default:
               break;
            }
         }
      });
   };
})(jQuery);

CSS Code:

<div class="tabs-wrap">
<h2 class="extra-title">Products</h2>

<ul class="tabs">
<li><a href="#tab1">Panels</a></li>
<li><a href="#tab2">Keypads</a></li>
<li><a href="#tab3">Devices</a></li>
<li><a href="#tab3">Manuals</a></li>
</ul>
</div>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div class="loopedCarousel">
<div class="container">
<div class="slides">

<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>Power Series</strong>
Now Available
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>Alexor</strong>
Now Available
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>9047</strong>
Now Available
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>New Panel</strong>
Spring 2011
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>

<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>Power Series</strong>
Now Available
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>Alexor</strong>
Now Available
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>9047</strong>
Now Available
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>New Panel</strong>
Spring 2011
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>

<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>Power Series</strong>
Now Available
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>Alexor</strong>
Now Available
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>9047</strong>
Now Available
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>
<div>
<dl>
<dt><a href="#"><img src="images/thumb2.jpg" alt="" /></a></dt>
<dd>
<strong>New Panel</strong>
Spring 2011
</dd>
<dd class="last">
<a href="#"><img src="images/info-icon.gif" alt="" /></a>Details
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab_content">
<div class="loopedCarousel">
<div class="container">
<div class="slides">
</div>
</div>
</div>
</div>
</div>

let me know if you need any further information. thank you!

Wordpress Slider

Similar Tutorials

View Content

Hi,

A page that loads a Slider on my Word Press Page loads the slider to OFF. I want It to load to ON as default

Its in a php file that resides in a Plugin inside a Shortcodes directory

Ive tried to change it but it seems to do nothing when i reload the page. I even deleted the file with the code in and it didnt effect the page at all?

Any help would be very mutch appriciated.

if($enableGoogle == 'yes'){
$output .= '<div class="fill-o-bot-wrap">
                                   <div class="row">
                                       <div class="col-md-2">
                                           <img src="'. get_template_directory_uri() .'/assets/images/bot-icon.png" alt="">
                                       </div>
                                       <div class="col-md-7">
                                           <strong>'.esc_html__( 'Feeling lazy? Say HELLO! to Fill-O-Bot! ', 'listingpro-plugin' ).'</strong>
                                           <p>'. esc_html__( 'Don’t worry Fill-o-BOT will help you OUT! Just enter any business on google places and Fill-O-Bot automatically fills in the data that it can grab.', 'listingpro-plugin' ) .'</p>
                                       </div>
                                       <div class="col-md-3">
                                           <div class="bot-on-tag-wrap">
                                               <span class="bot-on-tag">'. esc_html__( 'Turn Me On', 'listingpro-plugin' ) .'</span>
                                               <label class="switch">
                                                   <input id="fill-o-bot-check" class="form-control switch-checkbox" type="checkbox" name="fil-o-bot-check">
                                                   <div class="slider round"></div>
                                               </label>
                                           </div>
                                       </div>
                                   </div>

                               </div>';

Need Help Getting A Login Slider To Disappear When Logged In

Similar Tutorials

View Content

Hi all,

I have a problem I am not sure how to sort, hopefully someone here can help.

I have a sliding login panel on a website that I am making. Its quite discreet. I have a stripped down version here that you can see:
http://mgdesign.hostultra.com/login_test/login_test.php

On the page I am making, users with a log in enter their details and will be taken to the restricted page. I would like this sliding panel to be on every page when the user is not logged in.

Once they log in from the sliding panel they can still surf around all the main site pages. When they log out the session dies and it reverts to the home page.

However, when they are logged in I would like the sliding login panel to disappear from the top of each page. Is there any way I can do this simply?

Any help or advice would be greatly appreciated.

Moved: Modification Of Slider Hyperlink

Similar Tutorials

View Content

This topic has been moved to Third Party PHP Scripts.

http://www.phpfreaks.com/forums/index.php?topic=327718.0

Need Help To Get Info From Mysql Db And Loop In Slider

Similar Tutorials

View Content

Im turning a static slider revolution in a dynamic.

Images are uploading and fetching perfect from Mysql DB but the texts (top-text) is showing only in the first slide. The rest is empty.

Here is the Code

Any help would be great.
Thanks in advance.

UPLOAD.php

<?php
// Include the database configuration file
include 'database/dbConfig.php';
$statusMsg = '';

// File upload path
$targetDir = "uploads/";
$fileName = basename($_FILES["file"]["name"]);
$top_text = filter_input(INPUT_POST, 'top_text');
$targetFilePath = $targetDir . $fileName;
$fileType = pathinfo($targetFilePath,PATHINFO_EXTENSION);

if(isset($_POST["submit"]) && !empty($_FILES["file"]["name"])){
    // Allow certain file formats
    $allowTypes = array('jpg','png','jpeg','gif','pdf');
    if(in_array($fileType, $allowTypes)){
        // Upload file to server
        if(move_uploaded_file($_FILES["file"]["tmp_name"], $targetFilePath)){
            // Insert image file name into database
            $insert = $db->query("INSERT into images (file_name, top_text, uploaded_on) VALUES ('".$fileName."', '".$top_text."', NOW())");
            if($insert){
                $statusMsg = "The file ".$fileName. " has been uploaded successfully.";
            }else{
                $statusMsg = "File upload failed, please try again.";
            } 
        }else{
            $statusMsg = "Sorry, there was an error uploading your file.";
        }
    }else{
        $statusMsg = 'Sorry, only JPG, JPEG, PNG, GIF, & PDF files are allowed to upload.';
    }
}else{
    $statusMsg = 'Please select a file to upload.';
}

// Display status message
echo $statusMsg;
?>

SLIDER

<!-- Revolution slider -->
<section id="slider">
        <div class="tp-banner-container ">
            <div class="tp-banner rev-banner-fullscreen">
                 <ul>
                    <!-- SLIDE -->
                    <?php
                     // Include the database configuration file
                      include 'database/dbConfig.php';
        
                     // Get images from the database
                       $query = $db->query("SELECT * FROM images ORDER BY uploaded_on DESC");
        
                          if($query->num_rows > 0){
                          while($row = $query->fetch_assoc()){
                         $imageURL = 'uploads/'.$row["file_name"];
                         $top_text = $row['top_text'];
                    ?>
                        <!-- DYNAMIC SLIDE  -->
                    <li data-index="rs-140" data-transition="slideup" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="1/2" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="<?php echo $imageURL; ?>" alt="" style='background-color:#f4f4f4' alt="" width="482" height="800" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->

                        <!-- LAYERS 1.2 -->
                        <div class="tp-caption tp-resizeme" id="slide-1-layer-2" data-x="['left','left','left','left']" data-hoffset="['102','102','67','40']" data-y="['top','top','top','top']" data-voffset="['150','150','60','60']" data-fontsize="['18','18','14','14']" data-width="['345','345','345','259']" data-height="none" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="y:50%;z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:900;e:Power4.easeInOut;" data-transform_out="x:-50%;opacity:0;s:800;e:Power2.easeInOut;s:300;e:Power2.easeInOut;" data-start="500" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; min-width: 345px; max-width: 345px; white-space: normal; color: #3e3e3e; font-family: 'Montserrat'; letter-spacing: 7px;">
                        <?php echo $top_text; ?>
                        </div>
                        
                        <!-- /END DYNAMIC SLIDE  -->
                    </li>    

                        <?php }
                         }else{?>
                         

                          <!-- DEFAULT SLIDE  -->
                    <li data-index="rs-140" data-transition="slideup" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="" data-rotate="0" data-saveperformance="off" data-title="1/2" data-description="">
                        <!-- MAIN IMAGE -->
                        <img src="images/slide/slide-5-bg.jpg" style='background-color:#f4f4f4' alt="" width="482" height="800" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                        <!-- LAYERS -->

                        <!-- LAYERS 1.2 -->
                        <div class="tp-caption tp-resizeme" id="slide-1-layer-2" data-x="['left','left','left','left']" data-hoffset="['102','102','67','40']" data-y="['top','top','top','top']" data-voffset="['150','150','60','60']" data-fontsize="['18','18','14','14']" data-width="['345','345','345','259']" data-height="none" data-whitespace="normal" data-transform_idle="o:1;" data-transform_in="y:50%;z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:900;e:Power4.easeInOut;" data-transform_out="x:-50%;opacity:0;s:800;e:Power2.easeInOut;s:300;e:Power2.easeInOut;" data-start="500" data-splitin="none" data-splitout="none" data-responsive_offset="on" style="z-index: 6; min-width: 345px; max-width: 345px; white-space: normal; color: #3e3e3e; font-family: 'Montserrat'; letter-spacing: 7px;">
                            New Arrival
                        </div>

                    
                    <!-- /END DEFAULT SLIDE -->

                       <?php  } ?>

                    </li>
                    <!-- /SLIDE 1 -->

                    

                </ul>
            </div>
            <!-- /tp-banner -->
        </div>
        <!-- /tp-banner-container -->
    </section>
    <!-- /#Revolution slider -->

Php Slider Pagnation Post Title Link

Similar Tutorials

View Content

Hey guys I am trying to link my post tilte for pagnation to the actual post. This is wordpress blog-page.php MY SITE IS GSUEAGLENATION.COM on the homepage any of the sliders you can tell that the pagnantion titles don't link anywhere $slider_pagination[] = get_the_title(); ------- I have tried messing around with this code and it just messesup my site      snippet EXAMPLE BELOW OF WHERE MY CODE IS PULLING

   <div class="pager-desc">
<span class="cs-desc">

'.$slider_title.'    ---------------------------this is where my titles are showing up on my site but Its only pulling the title I want to like the title to the post

</span>

                       </div>
                                   </li>';
                           }
                       echo '</ul></div>';
               }
           px_enqueue_cycle_script();
       endif;
       wp_reset_postdata(); \ Attached Files page_blog.php   49.11KB   4 downloads

Fetch From Mysql To "content Slider"

Similar Tutorials

View Content

I've found a nice "content slider", and would now need a little help to get the info from MySQL, and show that in the "slider".

The slider generates the following example:
Code: [Select]
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>

<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#">15+ Excellent High Speed Photographs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
</div>
</div>

<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>

....
</div>
First I have to get all the headers/titles to the list/tab (menu):
Code: [Select]
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
</ul>
.. then the "title" is needed (again), and image, text for the fragments/divs.
Code: [Select]
<div id="fragment-?" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
</div>
</div>Do not really know how to resolve this in a good way.