Some slideshow application issue.

Zz · November 03, 2014, 04:02:00 PM

Hello everyone,

I've recently started to "build" a website using SMF and simpleportal. To find the website more visualy atractive I've searched for some slideshow implementation. However didn't find anything complete until i saw some tutorials on youtube. Basically the author form the video builds up a full slideshow with all the requirements i needed to implement on my website. However he uses his code like the whole website is a slideshow, so the pictures are huge and basicaaly the css coding has some 50 lines.

I wanted to apply the slideshow on a top block of simple portal. However when i apply it and in spite of being referenced to the file Design.css, I think that the main index.css is influencing the whole block so basically i get huge pictures and nothing like it should be

I post the code here from the php file and css file... I'm using the theme Lucid_Dreams_v2 and I think that i have to apply the css coding from Design. css to the index.css from the theme. However don't have a clue on how to do... Can anyone give me some help?

Thanks in advance

php code:

Code Select

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- Thank you for watching--->
    <!-- This is Geczi Manase -->
    <!-- Have a nice day -->
    <link rel="stylesheet" href="Design.css" />
    <script type="text/javascript">

        //ok , it's working , we are done , if you want to add imgs you have to :

        //1 - add an img tag with id : Img++; ex:  <img id="Img4" src="IMG/1.jpg"/>
        //2 - add an li tag  with id : S++;   ex:  <li id="S4"></li>
        //3 - add an p tag with id : SP++;    ex:  <p id="SP4"></p>
        //4 - change the value of nrImg 

        var nrImg = 3;  //the number of img , I only have 3 
        var IntSeconds = 4;     //the seconds between the imgs

        function Load()
        {
            nrShown = 0;    //the img visible
            Vect = new Array(nrImg + 10);
            Vect[0] = document.getElementById("Img1");
            Vect[0].style.visibility = "visible";

            document.getElementById("S" + 0).style.visibility = "visible";

            for (var i = 1; i < nrImg; i++)
            {
                Vect[i] = document.getElementById("Img" + (i + 1));
                document.getElementById("S" + i).style.visibility = "visible";
            }

            document.getElementById("S" + 0).style.backgroundColor = "rgba(255, 255, 255, 0.90)";
            document.getElementById("SP" + nrShown).style.visibility = "visible";

            mytime = setInterval(Timer, IntSeconds * 1000);
        }
        function Timer()
        {
            nrShown++;
            if (nrShown == nrImg)
                nrShown = 0;
            Effect();
        }
        //next img
        function next()
        {
            nrShown++;
            if (nrShown == nrImg)
                nrShown = 0;
            Effect();

            clearInterval(mytime);
            mytime = setInterval(Timer, IntSeconds * 1000);
        }
        function prev()
        {
            nrShown--;
            if (nrShown == -1)
                nrShown = nrImg -1;
            Effect();

            clearInterval(mytime);
            mytime = setInterval(Timer, IntSeconds * 1000);
        }
        //here changes the img + effect
        function Effect()
        {
            for (var i = 0; i < nrImg; i++)
            {
                Vect[i].style.opacity = "0";   //to add the fade effect
                Vect[i].style.visibility = "hidden";

                document.getElementById("S" + i).style.backgroundColor = "rgba(0, 0, 0, 0.70)";
                document.getElementById("SP" + i).style.visibility = "hidden";
            }
            Vect[nrShown].style.opacity = "1";
            Vect[nrShown].style.visibility = "visible";
            document.getElementById("S" + nrShown).style.backgroundColor = "rgba(255, 255, 255, 0.90)";
            document.getElementById("SP" + nrShown).style.visibility = "visible";
        }

    </script>
    <title></title>
</head>
<body onload="Load()">
    <div id="slider">
        <div id="imgs">
            <!-- here you have to add the img tag -->
            <img id="Img3" src="IMG/3.jpg"/>
            <img id="Img2" src="IMG/2.jpg"/>
            <img id="Img1" src="IMG/1.jpg"/>
        </div>
        <!--Here is going to be the left right buttons, the info and the imgs shown-->
        <div id="Snav">
            <!-- here is the circles , showes the current img -->
            <div id="SnavUp">
                <div id="Scircles">
                    <ul>
                        <!-- here you have to add the li tag-->
                        <li id="S0"></li>
                        <li id="S1"></li>
                        <li id="S2"></li>
                    </ul>
                </div>
            </div>
            <!-- the left and right button -->
            <div id="SnavMiddle">
                <img id="Sleft" src="IMG/left.png" onclick="prev()"/>
                <img id="Sright" src="IMG/right.png" onclick="next()"/>
            </div>
            <!-- the info -->
            <div id="SnavBottom">
                <!-- here you have to add the p tag-->
                <p id="SP0">Nature</p>
                <p id="SP1">Lake</p>
                <p id="SP2">Game of Thrones</p>
            </div>
        </div>
    </div>
</body>
</html>

Desing.css code:

Code Select

#imgs img 
{
    /*overlays all the imgs */
    /*You see only the first img, for now*/
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    transition: 1s;
    visibility:hidden;
    /*we want to show only 1 img at the time*/
}
/*the container */
#Snav 
{
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
/* where the circles are going to be*/
#SnavUp 
{
    display:block;
    width:100%;
    height:20%;
}
#Scircles 
{
    display:block;
    width:5%;
    height:15%;
    margin-right:5%;
    margin-top:2%;
    float:right;        /* is going to be on the right side of the slider*/
}
#Scircles ul 
{
    margin:0;
    float:right;
    display:block;
    width:100%;
    height:100%;
}
#Scircles li
{
    /*we don't need the dots*/
    list-style:none;
    display:block;
    background-color:rgba(0, 0, 0, 1);
    width:25%;
    height:90%;
    margin-left:5%;
    float:left;     /*on the same line*/
    visibility:hidden;
    /*we need circles, not squares*/
    border-bottom-left-radius:25px;
    border-top-left-radius:25px;
    border-bottom-right-radius:25px;
    border-top-right-radius:25px;

}
/*ok , we are done with the SnavUp*/
#SnavMiddle 
{
    display:block;
    width:100%;
    height:15%;
    margin-top:10%;     /*this is up to you , where you want the buttons*/
}
/*left button*/
#Sleft 
{
    width:8%;
    height:100%;
    float:left;
    margin-left:3%;
    opacity:0.8;
}
/*button effect*/
#Sleft:hover 
{
    opacity:0.8;
}
#Sright 
{
    width:8%;
    height:100%;
    float:right;
    margin-right:3%;
    opacity:0.8;
}
#Sright:hover 
{
    opacity:0.8;
}
/*now we have to add the info at the bottom of the slider*/
#SnavBottom 
{
    display:block;
    background-color:rgba(0, 0, 0, 0.8);
    width:100%;
    height:10%;
    position:absolute;
    bottom:0;
    left:0;
}
#SnavBottom p 
{
    font:normal 200% Arial;
    color:#fff;
    position:absolute;
    bottom:0;
    left:0;
    margin-left:3%;
    visibility:hidden;
}
/*that's all , now we need to code the slider, the effect*/

kat · November 03, 2014, 05:13:59 PM

Can't you simply change the container height/width= settings, to suit? (If that's the right bit).

Be aware... I think you'll find using this is likely to slow your site down, quite a bit...

Zz · November 03, 2014, 06:48:23 PM

Hello K@, thanks for the quick reply and warm welcome,

Changing the width, height will not make the change or at least didn't made the change, because i think the problem is that in spite of picking up the design.css coding for the slideshow formating it is then being overloaded by the index.css related to the theme I'm using. So basically I think that the solution for this would be to incorporate the coding form Design.css into the index.css theme coding... By this I mean create the coding under the css section that defines the body on top board block...

The big problem is that I'm a noob on the forum and aswell on this kind of programming!!

I don't have a clue on how to do it to be honest. I know that this will make my website much slower, but it will be indeed something that might make the difference in the area for wich I'm exploring the website.

Best regards

kat · November 04, 2014, 07:51:08 AM

If I had the feeling that you have, I think I'd be tempted to save a copy of index.css, so that I had a backup, then copy/paste the css you have for the slideshow into index.cs and see what happens...

If everything goes weird, you have that backup file to restore.

Illori · November 04, 2014, 07:57:34 AM

the code you show has a head and body section, SMF has those already defined. you cant have those duplicated. as a result the slideshow that you have will not work within SMF.

kat · November 04, 2014, 08:20:30 AM

There is that.

Sir Osis of Liver · November 04, 2014, 03:28:50 PM

There are many javascript slideshows you can stick in a portal block that don't rely on css for formatting, and can be sized to the block in the js, like the one I used here. Search 'javascript slideshow' and you should come up with something suitable.

Zz · November 04, 2014, 06:05:03 PM

Yes the only way of having the slideshow from the code running would be apply that code in the index.template.php and then insert the css code into index.css wich would probably ruin a lot of stuff...

I've already tried to insert the code from css into index.css but it did nothign new. And yes I have already one slideshow running Krash. Though i needed something a little bit better with all those next and previous buttons and some beautifull text behind every picture bla bla... Anyway i will try some other slideshow's and if i have trouble applying them i will be a pain in the ass again around here ok?

Thanks for the help!

Best regards

kat · November 05, 2014, 06:43:03 AM

No sweat.

I'll mark this as having been solved, for now, to keep it off the radar.

News:

Some slideshow application issue.

Zz

kat

Zz

kat

Illori

kat

Sir Osis of Liver

Zz

kat