Jquery slideshow achteraf importeren/toevoegen

dinsdag 3 juli 2012 18:16

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Goedenavond,

Ik heb gister een jquery slideshow gemaakt. Deze wil ik nu in mijn website zetten, tussen het menu en de content. Eigenlijk tussen twee afbeeldingen.

Enig idee hoe dit moet, en/of dit mogelijk is? Of had ik hem gelijk in de website moeten maken, en is hem achteraf erin geen goed idee geweest?

Mijn code:

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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slideshow</title>

<style type="text/css">
.slider {
    width:1200px;
    height:442px; 
    overflow:hidden;
    margin:30px auto;
    background-image:url(file:///C|/Users/Henio%20Gdaniec/Desktop/images/loading.gif);
    background-repeat:no-repeat; 
    background-position:center;
}
.slider img {
    width:1200px;
    height:442px;
    display:none;
    
    
}

    
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">

    function Slider(){
        $(".slider #1").show("fade",500);
        $(".slider #1").delay(5500).hide("slide",{direction:"left"},500);   
        
        var sc=$(".slider img").size();
        var count=2;
        
        setInterval(function (){
            $(".slider #"+count).show("slide", {direction: "right"}, 500);
            $(".slider #"+count).delay(5500).hide("slide", {direction: "left"}, 500);
            
            if(count==sc){
               count=1;
            }else{
                count=count + 1;
            }
        }, 6500);
    }
    
</script>
</head>
<body onload="Slider();">

<body>

    <div class="slider">
        <img id="1" src="image1.jpg" border="0" alt="img1" />
        <img id="2" src="image2.jpg" border="0" alt="img2" />
        <img id="3" src="image3.jpg" border="0" alt="img3" />
    </div>
    <div class="schaduw">
        
</body>
</html>

Iemand die voor mij een oplossing heeft?

Met vriendelijke groet,
HnDj

woensdag 4 juli 2012 10:56

Acties:

0 Henk 'm!

bartbh

Heb je het überhaupt al geprobeerd? Je kunt de relevante scripts en images overnemen op de pagina waar je hem wil hebben.

Hoe dat precies in elkaar steekt, dat kunnen wij natuurlijk hier niet ruiken als je verder daar geen informatie over geeft.

Nu is het overigens ook niet de bedoeling dat je hier een complete htmlpagina’s neer gaat ploffen, want daar zitten we ook niet op te wachten.

Maar goed, probeer het dus eens.

let ook even op je verwijzingen, “file:///C|/Users/Henio%20Gdaniec/Desktop/images/loading.gif” gaat niet werken namelijk op een andere computer.

woensdag 4 juli 2012 11:02

Acties:

0 Henk 'm!

ViNyL

Meestal laat je de te tonen afbeelding door bijvoorbeeld een CMS uitspugen op de plek waar de slideshow moet komen. Je kan in de backend dan gewoon afbeeldingen toevoegen.

De opmaak plaatst je daar dan bij, de HTML in de template of een custom code block net als je javascript.

Je kan er ook een eigen PHP script voor schrijven wat uit een folder de afbeeldingen op haalt. Als je er dan een nieuwe neerzet zal die bij een pagina reload ook opgenomen worden. Ook hier plaats je dan je eigen slideshow dus gewoon op de plek waar het moet komen in je website.

Het eerst opmaken en testen zoals je dat nu hebt gedaan is wel een goede manier, je moet hem nu dus alleen in de site opnemen.

[ Voor 31% gewijzigd door ViNyL op 04-07-2012 11:04 ]

woensdag 4 juli 2012 17:09

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt voor jullie reacties.

Tuurlijk heb ik het al geprobeerd. Ik ga niet eerst alle forums af en er iets zetten zonder dat ik het heb geprobeerd, dat is zonde van de tijd. Zowel voor julie als mij.

Wanneer ik het script op de plek plaats waar ik wil, dan geeft hij niks aan. Ik neem aan de ik het css/text gedeelte bij het .css bestand moet doen van de website? Of moet dat een apart .css bestand worden dat ik kan dan weer link, of denk ik nu te moeilijk?

Dat is dus dit gedeelte;

code:

<style type="text/css">
.slider {
    width:1200px;
    height:442px; 
    overflow:hidden;
    margin:30px auto;
    background-repeat:no-repeat; 
    background-position:center;
}
.slider img {
    width:1200px;
    height:442px;
    display:none; 
 
}

</style>

Het gedeelte hierboven, heb ik geplakt na de opmaak waardoor dat het er als volgt uitziet;

code:

body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #42413C;
margin: 0;
padding: 0;
color: #000

.slider {
    width:1200px;
    height:442px; 
    overflow:hidden;
    margin:30px auto;
    background-repeat:no-repeat; 
    background-position:center;
}
.slider img {
    width:1200px;
    height:442px;
    display:none; 
 
}

}

Het script dat ik eerder noemde (in mijn eerste post) plakte ik in de index.html tussen;

code:

<div class="header">
Hier plakte ik het.
<!-- end .header --></div>
  <div class="content">

Aangezien dat ik dat in de header wil hebben.

Ik zie nu wel het frame staan als het ware maar hij slide niet, ik zie ook geen afbeeldingen (de links zijn gecontroleerd van het script na de afbeeldingen dus die zijn in orde).

Misschien dat ik nu veel te ingewikkeld en te dom denk maar dit lijkt mij een logische oplossing.

Alvast bedankt voor de hulp.

woensdag 4 juli 2012 17:35

Acties:

0 Henk 'm!

Barryvdh

Maakt niet uit of je het bij elkaar gooit of niet, als ze maar allebei ingeladen worden. En je moet het iig niet doen zoals je het nu doet, want nu staat je slider css tussen de accolades van body.
Heb je ook je javascript gekopieerd?

Je kan ook even een jsFiddle maken, als testcase

donderdag 5 juli 2012 13:10

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt voor je reactie.

Ja heb me javascript inderdaad gekopieerd, op de plek waar hij moet. Maar nog steeds zie ik gene beweging. Heb al veel opties geprobeerd maar helaas nog niet de goede.

Is het mogelijk via Adobe flash een soort zelfde slideshow te maken, dus dat de afbeeldingen écht sliden?

Dan is het alleen maar het flash-bestandje importen.

donderdag 5 juli 2012 13:21

Acties:

0 Henk 'm!

Barryvdh

Alles kan, maar ik zou Flash niet aanraden.
Heb je de onLoad code ook in je nieuwe site gezet?
Kijk eens of je javascript console iets zegt (bijvoorbeeld F12 drukken in Chrome)

donderdag 5 juli 2012 13:29

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Je weet dat IDs in HTML niet met een cijfer mogen beginnen.

Ik zou overigens, aangezien je toch al jQuery gebruikt, je onLoad="" vervangen door de jQuery versie.

Wat voor Javascript error's krijg je?

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 5 juli 2012 15:50

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt voor jullie reacites.

Alles geprobeerd wat jullie me vertelde maar zonder resultaat.

Ook heb ik geen error's gekregen bij de test die ik via (IE9-F12-Controleren op fouten) uitvoerden.

Volgensmij doe ik iets verkeerd, maar wat?

donderdag 5 juli 2012 15:59

Acties:

0 Henk 'm!

bartbh

Probeer eens een testcase online te zetten? Dan kunnen we zien wat je geprobeerd hebt.

Testcase is dus een uitgeklede versie, niet een link naar je website want dat wordt als spamerig beschouwd.

Wat voor "soort" website is het eigenlijk? Zelf gebouwd, enkele pagina, CMS systeem? etc. Wat meer info zou ons ook helpen.

donderdag 5 juli 2012 16:31

Acties:

0 Henk 'm!

Barryvdh

Hier even een werkend jsFiddle voorbeeld voor je: http://jsfiddle.net/VWDZ6/
Dat werkt dus wel. In dit voorbeeld gebruik ik overigens jQuery ready() ipv je onLoad, dat is wat makkelijker bij te houden. En je div shadow werd niet afgesloten.
Dit is een voorbeeld dus met een regeltje html eronder/boven, en extra css:
http://jsfiddle.net/VWDZ6/1/

donderdag 5 juli 2012 17:40

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt voor jullie reacites.

Hier is mijn voorbeeld; http://jsfiddle.net/h4LyL/

Ik weet niet wat ik verkeerd doe. Heb even dezelfde afbeeldingen als hierboven gepakt.

De div tag en het css gedeelte lijkt me goed te staan, maar het script wil niet mee werken. Het is tevens een zelf gemaakte website met meerdere pagina's.

Ik denk zelf in ieder geval dat ik iets verkeerd doe met het script, maar wat weet ik niet.. Maar bij mijn script staan deze regeltjes er niet in;

code:

1
2

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Maar dat is denk ik wat jij bedoeld de onload veranderen na jQuery. Alleen weet ik niet waar dit moet gebeuren..

[ Voor 48% gewijzigd door Verwijderd op 05-07-2012 17:46 ]

donderdag 5 juli 2012 17:57

Acties:

0 Henk 'm!

bartbh

Je moet jQuery UI nog aanvinken in de te includen libraries.

http://jsfiddle.net/h4LyL/1/

Maar hoe pas je het in je eigen website toe, want dit is alleen maar het script wat je al had in jsfiddle gezet.

donderdag 5 juli 2012 17:57

Acties:

0 Henk 'm!

Barryvdh

In jouw fiddle laad je geen jquery ui in he, doe je dat in de site wel? Daarnaast heb je dus in je fiddle voor een 1.4.4 versie gekozen, dat is nogal oud, misschien verstandig om gewoon de laatste versies te gebruiken. (Zoals in je voorbeeld)
(He, net te laat)

[ Voor 6% gewijzigd door Barryvdh op 05-07-2012 17:58 ]

donderdag 5 juli 2012 18:41

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt voor jullie reacties.

Het ziet er bij mij alsvolgt uit.

CSS:

code:

@charset "utf-8";

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
}
.slider {
    width:1200px;
    height:442px; 
    overflow:hidden;
    margin:30px auto;
    background-repeat:no-repeat; 
    background-position:center;
}
.slider img {
    width:1200px;
    height:442px;
    display:none;
    
}

/* ~~ Element/tag selectors ~~ */
Dan volgt de rest van CSS

SCRIPT:

code:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home -</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

    function Slider(){
        $(".slider #1").show("fade",500);
        $(".slider #1").delay(5500).hide("slide",{direction:"left"},500);   
        
        var sc=$(".slider img").size();
        var count=2;
        
        setInterval(function (){
            $(".slider #"+count).show("slide", {direction: "right"}, 500);
            $(".slider #"+count).delay(5500).hide("slide", {direction: "left"}, 500);
            
            if(count==sc){
               count=1;
            }else{
                count=count + 1;
            }
        }, 6500);
    }
    
</script>
</head>

HTML:

code:

<div class="header">
<div class="slider">
        <img id="1" src="image1.png" border="0" alt="img1" />
        <img id="2" src="image2.png" border="0" alt="img2" />
        <img id="3" src="image3.png" border="0" alt="img3" />
    </div>
<!-- end .header --></div>
  <div class="content">
Dan volgt de rest van de content

Wat overblijft:

code:

1
2
3

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">

Ik hoop dat het nu wat duidelijker is.

In jouw fiddle laad je geen jquery ui in he, doe je dat in de site wel?

Dat doe ik inderdaad niet, eerlijk gezegd zou ik niet weten hoe ik dat moet doen. Ben ook nog maar een kleine zelfstandige beginner hierin.

donderdag 5 juli 2012 19:18

Acties:

0 Henk 'm!

Barryvdh

Hoe bedoel je, 'wat overblijft'. Dat zijn de 2 regels die jQuery en jQuery UI includen..

Die zijn wel redelijk essentieel hier. Zet die 2 regels:

code:

1
2

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Eens na je css en voor de rest van je script. (Tussen regel 4 en 5 dus)

En dan dus die onready code moet dan dus na je Slider functie, zoals in de fiddle:

code:

1
2
3

$(document).ready(function(){
 Slider();
});

donderdag 5 juli 2012 19:23

Acties:

0 Henk 'm!

R4gnax

Jquery

Begin eens met die MM_* functies te dumpen. Dat is hele oude Dreamweaver rommel die gericht is op browsers van het jaar 1999. In het mildste geval is het voor het debuggen van deze case slechts ruis op de lijn, in het ergste geval zit er een bug in die het script laat crashen en komt daar je probleem vandaan.

Zo te zien voor je jouw code ook nog niet vanuit $(document).ready uit, zoals eerder al geadviseerd. Daar heb je dus nog wat werk te doen. (Sterker nog; uit je geposte sample code maak ik op dat je op het moment de functie alleen definieert en helemaal niet uitvoert.)

offtopic:
"Hele oude Dreamweaver rommel"... Is dat nou een tautologie, pleonasme, of allebei?

donderdag 5 juli 2012 19:39

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt voor jullie reacties.

Ik heb het gedaan zoals je me vertelde @Barryvdh maar of ik het juist heb gedaan? Het werkt namelijk nog altijd niet.

code:

function Slider()
{
$(document).ready(function(){
 Slider();
})&#8203;
        $(".slider #1").show("fade",500);
        $(".slider #1").delay(5500).hide("slide",{direction:"left"},500);

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 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home -</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
Dan volgt al het script gedeelte..

p.s. Ik heb de code wel gedecode na html.

Maar als ik de MM* functies verwijder werken me rollovers niet meer, is daar een alternatief voor?

[ Voor 6% gewijzigd door Verwijderd op 05-07-2012 19:44 ]

donderdag 5 juli 2012 19:50

Acties:

0 Henk 'm!

Barryvdh

Nee, nu zet je de die onready IN de Slider functie, niet er na.

En die 2 regels javascript dus tussen je huidige script en je css, maargoed, dit zou ook moeten werken, maar beter is gewoon eerst je meta tags, dan je css en als laatste je javascript (al is onderaan de pagina nog beter). (Dus niet tussen regel 4 en 5 van jouw html pagina, maar van dat stukje code dat je stuurde..)

Maargoed, ik neem aan dat onderstaande wel werkt, maar als je zo weinig snapt van hoe je html, css en javascript opbouwt, kan je echt beter gewoon even wat cursussen volgen, in plaats van net zo lang dingen proberen dat het werkt (is opzich goed, maar niet op deze manier)

En daarnaast, gooi die lelijk dreamweaver dingen eruit. Alternatief is gewoon een :hover in je css (google dat maar)

En bij de meeste sliders slide je het ene plaatje uit, en de volgende tegelijk in, zodat ze aan elkaar zitten, maar als dit de bedoeling was, is het prima.

code:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home -</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

    <script type="text/javascript">
        function MM_swapImgRestore() { //v3.0
            var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
        }
        function MM_preloadImages() { //v3.0
            var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
            }

            function MM_findObj(n, d) { //v4.01
                var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
                for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
                if(!x && d.getElementById) x=d.getElementById(n); return x;
            }

            function MM_swapImage() { //v3.0
                var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
                    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
            }

            function Slider(){
                $(".slider #1").show("fade",500);
                $(".slider #1").delay(5500).hide("slide",{direction:"left"},500);     
        
                var sc=$(".slider img").size();
                var count=2;
        
                setInterval(function (){
                    $(".slider #"+count).show("slide", {direction: "right"}, 500);
                    $(".slider #"+count).delay(5500).hide("slide", {direction: "left"}, 500);
            
                    if(count==sc){
                        count=1;
                    }else{
                        count=count + 1;
                    }
                }, 6500);
            }
            $(document).ready(function(){
                Slider();
            });
    </script>
</head>

donderdag 5 juli 2012 19:58

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Hij werkt!

God zeg, wat ben ik blij!

Bedankt!

Onderwerpen