XSitePro Website Design Software Message Board

The online forum dedicated to XSitePro users. Get help with website design in general and using this popular and incredibly powerful website software
It is currently Wed Jun 19, 2013 8:31 am

View unanswered posts | View active topics


Board index » XSitePro » Technical Discussion

All times are UTC - 7 hours




Post new topic Reply to topic  Page 1 of 2
  [ 22 posts ]  Go to page 1, 2  Next
  Print view Previous topic | Next topic 
Author Message
CopyWolf
PostPosted: Mon May 21, 2012 5:59 pm 
Offline
User avatar

Joined: Sat Aug 30, 2008 7:22 pm
Posts: 1890
Location: The road less traveled...
A frequent request here seems to be for an easy to use slideshow. Here's one with minimal code and no bells and whistles.
Note that there is no provision to pause on hover.
The only parameter you might want to tweak is the display time.
Look for this code:
Code:
$(function() {
    setInterval( "slideSwitch()", 5400 );
});
The slide interval is set to 5400 milliseconds (5.4 seconds).
Note that you can add ALT text and a title, which can help with SEO.
Also, since the file names are in the <body> of the page the file names can also potentially enhance SEO.

This slideshow works with jQuery from version 1.4.2 and up.
The slideshow works fine with XSite Pro.

YOU WILL NEED TO UPDATE THE DOCTYPE. XSitePro's older DOCTYPE is inadequate for jQuery.
In Other --> Global Scripts --> Before anything else in the file
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" xml:lang="en" lang="en">

The following scripts go in the <HEAD> section of the page.

Other --> Global Scripts --> In the HEAD section of the page...
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript">

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()", 5400 );
});

</script>

<!---- That's the Java Script. Here's the CSS  ---->

<style type="text/css">

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

#slideshow {
    position:relative;
   width:600px;
    height:400px;
}

#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>
This code goes in the table cell <td> where you want the slideshow.
Code:
<td style=
            "WIDTH: 610px; HEIGHT: 410px;"
                valign="middle"
                align="center">
                <div id="slideshow">
                   <img src="/images/falcon-inflight-01.jpg" title="Falcon Picture 1" alt="keywords and phrases 1" />
                   <img src="/images/falcon-inflight-02.jpg" title="Falcon Picture 2" alt="keywords and phrases 2"/>
                   <img src="/images/falcon-inflight-03.jpg" title="Falcon Picture 3" alt="keywords and phrases 3"/>
                </div>
</td>

Enjoy!

_________________
XSitePro runs great on HostGator (WordPress does, too)
Image
Top
 Profile  
 
ScottB
PostPosted: Tue May 22, 2012 5:48 am 
Offline

Joined: Fri Feb 19, 2010 11:02 am
Posts: 64
Thanks for posting this CopyWolf.

Do you have a site that you are currently using this on that I can take a look at?
Top
 Profile  
 
CopyWolf
PostPosted: Tue May 22, 2012 7:44 am 
Offline
User avatar

Joined: Sat Aug 30, 2008 7:22 pm
Posts: 1890
Location: The road less traveled...
ScottB wrote:
Thanks for posting this CopyWolf.

Do you have a site that you are currently using this on that I can take a look at?

Oops! I neglected to put the demo page (created in XSite Pro using the slideshow) in my post.
Here's the URL : http://www.painreliefnet.com/slideshow.html

Note that this slideshow has no pause on hover, although the title text will display on hover.
This is the simplest JavaScript slideshow (that I have found) that has SEO potential and that works with XSite Pro with very little fuss.
I have other, more complex slideshows in my toolkit that work with XSite Pro and have more features. They also require more tweaking.
This slideshow is pretty much drop in the code, adjust the dimensions, file names,ALT text, titles, etc. and it runs.

For some reason the presence of the links was breaking the slideshow (they worked fine last night). I will post another slideshow with more bells and whistles later today.

_________________
XSitePro runs great on HostGator (WordPress does, too)
Image
Top
 Profile  
 
fangwee
PostPosted: Mon Jun 11, 2012 6:34 am 
Offline

Joined: Mon Jun 11, 2012 6:25 am
Posts: 4
Hi Copywolf,

I wanted to put 3 photo for the slide show, so I follow your script above, but when I preview it give me 3 boxes, with individual photo in each box and flashing ~5.4sec one by each and other. How to combine 3 boxes into 1 and 3 photo appear one at a time?

Thank you for your great help.

Best Regards,
Wee

Here is the script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript">

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()", 5400 );
});

</script><!--- CSS for Slideshow --->

<table style="BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
class="XSP_OUTLINE"
border="0"
cellspacing="0"
cellpadding="0"
align="center">
<tbody>
<tr>
<td style="BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
class="XSP_CENTER_PANEL">
<table style="BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
class="XSP_CENTER_PANEL"
border="0"
cellspacing="0"
cellpadding="0">
<tbody>
<tr>
<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
class="XSP_MAIN_PANEL">
<table style="BACKGROUND-COLOR: #2b2b2b; WIDTH: 950px; HEIGHT: 812px"
border="0"
cellspacing="1"
cellpadding="0"
align="center">
<tbody>
<tr>
<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ; valign:"
align="left">&nbsp;</td>

<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ; valign:"
align="left">&nbsp;</td>

<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
valign="top"
align="left">&nbsp;</td>
</tr>

<tr>
<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ; valign:"
align="left">&nbsp;</td>

<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; WIDTH: 610px; HEIGHT: 410px; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
valign="middle"
align="center">
<div id="slideshow">
<img title="Falcon Picture 1"
alt="keywords and phrases 1"
src="C:/images/images/images/falcon-inflight-01.jpg">
<img title="Falcon Picture 2"
alt="keywords and phrases 2"
src="C:/images/images/images/falcon-inflight-02.jpg">
<img title="Falcon Picture 3"
alt="keywords and phrases 3"
src="C:/images/images/images/falcon-inflight-03.jpg">
</div>
</td>

<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR: ; valign:"
align="left">&nbsp;</td>
</tr>

<tr>
<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
valign="top"
align="left">&nbsp;</td>

<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
valign="top"
align="left">&nbsp;</td>

<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
valign="top"
align="left">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>

<tr>
<td style="BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
class="XSP_FOOTER_PANEL"
colspan="2">
<table style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; WIDTH: 700px; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
border="0"
cellspacing="1"
cellpadding="0"
align="center">
<tbody>
<tr>
<td style=
"BORDER-BOTTOM-COLOR: ; BORDER-TOP-COLOR: ; BORDER-RIGHT-COLOR: ; BORDER-LEFT-COLOR:"
valign="top"
align="left"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Top
 Profile  
 
CopyWolf
PostPosted: Mon Jun 11, 2012 7:18 am 
Offline
User avatar

Joined: Sat Aug 30, 2008 7:22 pm
Posts: 1890
Location: The road less traveled...
To get the slideshow to preview properly from XSitePro on your local computer, the jQuery library needs to be loaded on the local machine.

You can download jQuery for free at: http://docs.jquery.com/Downloading_jQuery. The "minified" version works fine for the slideshow.

Import the unzipped file into your XSite Pro website with Other --> Resource Manager and save it in the script folder. When the website is published the library will be uploaded to the server.

Instead of calling the script from the Google sever, it now will be called from your server.

Replace <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
with
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script> (or whatever version of jQuery you are using)

_________________
XSitePro runs great on HostGator (WordPress does, too)
Image
Top
 Profile  
 
fangwee
PostPosted: Mon Jun 11, 2012 7:26 am 
Offline

Joined: Mon Jun 11, 2012 6:25 am
Posts: 4
Dear Copywolf,

Thank you for your quick reply. I will try it out.

Best Regards,
Fangwee
Top
 Profile  
 
fangwee
PostPosted: Mon Jun 11, 2012 4:58 pm 
Offline

Joined: Mon Jun 11, 2012 6:25 am
Posts: 4
Dear copy wolf,

While i still trying, is this method Mac computer can see the slide show too?
Top
 Profile  
 
CopyWolf
PostPosted: Mon Jun 11, 2012 7:05 pm 
Offline
User avatar

Joined: Sat Aug 30, 2008 7:22 pm
Posts: 1890
Location: The road less traveled...
fangwee wrote:
Dear copy wolf,

While i still trying, is this method Mac computer can see the slide show too?


I don't know since I don't run XSitePro on a Mac.

The slideshow displays okay on the web when viewed in Safari on a Mac.

_________________
XSitePro runs great on HostGator (WordPress does, too)
Image
Top
 Profile  
 
xrocker30
PostPosted: Wed Nov 07, 2012 8:46 pm 
Offline

Joined: Sun Jul 17, 2011 5:28 pm
Posts: 176
Hello,

I can't seem to get the slideshow part working, it just appears as two images. I tried to get it working on a test site here: www.majesticsolar.com

If you could take a look and let me know what might be wrong that would be appreciated. Thanks
Top
 Profile  
 
CopyWolf
PostPosted: Thu Nov 08, 2012 7:44 am 
Offline
User avatar

Joined: Sat Aug 30, 2008 7:22 pm
Posts: 1890
Location: The road less traveled...
You have the HTML code referencing the slideshow, but there is no JavaScript slideshow loaded in the <head> section and no call to load jQuery form either your server or Google. Look at the code at the beginning of this topic. This needs to be in the <head> section of the page.

Also update the DOCTYPE. The older DOCTYPE used by XSitePro is inadequate for jQuery.

Here's the DOCTYPE code I use with jQuery:
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" xml:lang="en" lang="en">

_________________
XSitePro runs great on HostGator (WordPress does, too)
Image
Top
 Profile  
 
xrocker30
PostPosted: Thu Nov 08, 2012 5:01 pm 
Offline

Joined: Sun Jul 17, 2011 5:28 pm
Posts: 176
Hi Copywolf,

Thank you for your reply, it turns out I accidentally had the check box clicked for heading scripts in "Advanced Settings" for the home page, which was overriding your script that I placed in the global heading area.

Anyways, my last question is what do I need to change to make it so that the first picture shows right away? I don't want 10 seconds at the beginning where no picture is there.

Thanks
Top
 Profile  
 
CopyWolf
PostPosted: Thu Nov 08, 2012 10:18 pm 
Offline
User avatar

Joined: Sat Aug 30, 2008 7:22 pm
Posts: 1890
Location: The road less traveled...
xrocker30 wrote:
Anyways, my last question is what do I need to change to make it so that the first picture shows right away? I don't want 10 seconds at the beginning where no picture is there.


The first slide, pic1.jpg, is 772 Kb. It's taking several seconds to load.

The 2nd slide, pic2.jpg, is 171 Kb and loads much faster.

Both images are the same 310px X 472px in width and height.

I downloaded pic1.jpg and opened it with GIMP. Then, I saved it as pic1a.jpg at 90%.
The file size in Windows Explorer went from 790,992 Kb to 44,914 Kb!

I did the same thing with pic2.jpg and it shrank from 175,047 Kb to 73,315 Kb.

Reducing the image file size will do wonders for the slides loading speed.

_________________
XSitePro runs great on HostGator (WordPress does, too)
Image
Top
 Profile  
 
xrocker30
PostPosted: Thu Nov 08, 2012 10:40 pm 
Offline

Joined: Sun Jul 17, 2011 5:28 pm
Posts: 176
Hi Copywolf,

I know I haven't shrunk the file sizes of my images yet, I threw this slideshow script together very quick and messy just to see if I could get it working.

However I don't believe reducing the file size will make a difference with what I'm talking about. I believe something in the script is causing this period of no images.

I did a test on both my website, and your website: http://www.painreliefnet.com/slideshow.html

I noticed that it takes 5 seconds from the moment you enter the website to show the first image, and then every 5 seconds after that the slideshow switches pictures. I'm thinking there must be something I can change in the script to show the first image as soon as it's loaded, instead of waiting a whole 5 seconds, as if there is a blank slide at the beginning.

Thank you,
Xrocker30
Top
 Profile  
 
CopyWolf
PostPosted: Fri Nov 09, 2012 12:11 pm 
Offline
User avatar

Joined: Sat Aug 30, 2008 7:22 pm
Posts: 1890
Location: The road less traveled...
You can always set a "slide" as the background image for the container holding the slideshow. It will load immediately.

I have used at least a half-dozen slideshows and sliders with XSitePro. Each one runs a bit differently.

This one, X-rayPhantom.com , uses a slideshow from Dynamic Drive: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

This one works with XSitePro: http://www.webresourcesdepot.com/jquery-image-slider-with-attractive-effects-coin-slider/
http://www.painreliefnet.com/seo-slider.html

_________________
XSitePro runs great on HostGator (WordPress does, too)
Image
Top
 Profile  
 
xrocker30
PostPosted: Fri Nov 09, 2012 5:04 pm 
Offline

Joined: Sun Jul 17, 2011 5:28 pm
Posts: 176
Thanks for sticking with me Copywolf,

I used your suggestion of making the background of the table one of the slides and it works just how I want.
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  Page 1 of 2
  [ 22 posts ]  Go to page 1, 2  Next

Board index » XSitePro » Technical Discussion

All times are UTC - 7 hours


Who is online

Users browsing this forum: Khaldoun and 0 guests

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group