Can anyone help me

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Hey can any one assist me how to create slide show from this website can anyone put the code in one form and tell me how it will start showing slideshow
http://www.techrepublic.com/article/s...
how to add pictures and how to make it work
plz help me
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes

Posted 8 years ago

  • 1
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Safi Ulah,

If you would like an easy Slideshow, I would recommend using WOW Slider. It is part of the same family as Visual Lightbox and I have created a guide for that. The Software is intuitive and easy to follow.

Here's the guide: The Guide to Visual Lightbox

Here's an example of what can be achieved: Shamrock Buses Website (Home Page)(Yola created website)

Here's the WOW Slider website: WOW Slider website

Hope these help,

If you need any assistance in setting this up, please let me know.

Andi.
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Okay, open WOW Slider and do the following:

1. Click on the green arrow and select the images you would like to use.
2. Add some descriptions to these images and put them in the right order.
3. Click on the button next to the publish button and set the settings.
4. Set WOW Slider to publish to your computer.
5. Locate the files on your computer
6. Open the index.html file in Notepad, copy all of the code and paste it into a HTML Widget on the Yola page you would like.
7. Open the CSS File (On your computer) in Notepad and edit the links of the images. (from .../images/next.png to resources/next.png - depending on where on your network they are,
8. Upload the CSS File. (If you are Yola Free add the style code to the code on your Yola Page but, remove the link to the stylesheet and replace with<!---

<style type="text/css>
/*Here goes the code from the CSS sheet you have just edited */
</style>

--->
9. Upload the images to your File Manager.
10. Change the links to al of the images in your HTML Code.
11. Repeat the steps for the CSS for the JavaScript if you do not have Yola Silver.

I have to go to work now and I will be offline for the next five hours. I shall be able to reply then. For the meantime, a Yola employee maybe able to help.

Andi
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks Andi for your assistance on this!
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes
Hey andi i donot under stand what do you mean by
Open the CSS File (On your computer) in Notepad and edit the links of the images. (from .../images/next.png to resources/next.png - depending on where on your network they are,
where is css file could you give me more description about it i dont understand it
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Hello Safi,

The CSS File will be located in the area you told WOW Slider to export the Slider to. For instancere: My Documents -> WOW SLider -> CSS ->file.css

Hope this helps,

And thanks Sanja :)

Andi
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes
But if you have picture where css file is it will helpful Andi plz have you a screenshot
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
Here we are:



You would have to look at the top section of code.

Hope this helps.

Andi
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes
and now what is the icon of css file sorry andy idont know about css file so iam getting trouble
Photo of Andi North, Mangopear Media

Andi North, Mangopear Media

  • 782 Posts
  • 111 Reply Likes
It will be the file called Style
Photo of safi ullah

safi ullah

  • 142 Posts
  • 9 Reply Likes
Hey here is the code index.html file and css file could you tell that i have to place index and css file in one html or in different and could you make changes to the code if you make changes to the css file it will great because i gont understand them here is the code of index.html


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

WOWSlider generated by WOWSlider.com

<!-- Start WOWSlider.com HEAD section -->

a#vlb{display:none}

<!-- End WOWSlider.com HEAD section -->

<!-- Start WOWSlider.com BODY section -->


<!-- End WOWSlider.com BODY section -->



And here is the css file code


/* bottom center */
#wowslider-container1 .ws_bullets {
top:0;
right: 0;
}

#wowslider-container1 {
/* overflow: hidden; */
zoom: 1;
position: relative;
width:960px;
height:360px;
margin:0 auto;
z-index:100;
}
#wowslider-container1 .ws_shadow{
width:100%;
background: url('shadow.png') left 100%;
height:30px;
position: absolute;
left:0;
bottom:-30px;
z-index:-1
}
#wowslider-container1 .ws_images{
position: absolute;
left:0px;
top:0px;
width:960px;
height:360px;
overflow:hidden;
}
#wowslider-container1 .ws_images a{
color:transparent;
}

#wowslider-container1 .ws_images img{
top:0;
left:0;
border:0px none;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}

#wowslider-container1 .ws_bullets {
font-size: 0px;
padding: 10px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
#wowslider-container1 .ws_bullets a {
margin-left:4px;
width:8px;
height:15px;
background: url('bullet.png') no-repeat left 50%;
float: left;
text-indent: -1000px;
position:relative
}
#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
background-position: right 50%;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
position:absolute;
display:none;
top:50%;
margin-top:-28px;
z-index:60;
height: 62px;
width: 38px;
background-image: url('arrows.gif');
}
#wowslider-container1 a.ws_next{
background-position: 100% 0;
right:-8px;
}
#wowslider-container1 a.ws_prev {
left:-8px;
background-position: 0 0;
}
#wowslider-container1 a.ws_next:hover{
background-position: 100% 100%;
}
#wowslider-container1 a.ws_prev:hover {
background-position: 0 100%;
}
* html #wowslider-container1 a.ws_next, * html #wowslider-container1 a.ws_prev{display:block}
#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev {display:block}
#wowslider-container1 .ws-title{
position: absolute;
bottom:50px;
left: 0;
margin-right:5px;
z-index: 50;
padding:12px;
color: #F9FBFB;
text-transform:uppercase;
background:#000000;
font-family: Helvetica,Arial,Verdana,sans-serif;
font-size: 18px;
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 13px;
text-transform:none;
}#wowslider-container1 .ws_bullets a img{
text-indent:0;
display:block;
top:16px;
left:-120px;
visibility:hidden;
position:absolute;
-moz-box-shadow: 0 0 5px #999999;
box-shadow: 0 0 5px #999999;
border: 5px solid #FFFFFF;
}
#wowslider-container1 .ws_bullets a:hover img{
visibility:visible;
}

#wowslider-container1 .ws_bulframe div div{
height:90px;
overflow:visible;
position:relative;
}
#wowslider-container1 .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:240px;
}
#wowslider-container1 .ws_bullets .ws_bulframe{
display:none;
top:20px;
overflow:visible;
position:absolute;
cursor:pointer;
-moz-box-shadow: 0 0 5px #999999;
box-shadow: 0 0 5px #999999;
border: 5px solid #FFFFFF;
}
#wowslider-container1 .ws_bulframe span{
display:block;
position:absolute;
top:-11px;
margin-left:-9px;
left:120px;
background:url('triangle.png');
width:15px;
height:6px
}


Hey here the images name

guildwars2-02-2560x1600
guildwars2-03-1920x1200
guildwars2-04-1920x1200
guildwars2-09-1920x1200
guildwars2-13-1920x1200

plz make changes to the code that i only have to upload images to my file manager and the slide show is ready i could do that work but i dont understand what to do.sorry andi for that plz make them correct i really need them