1. #1
    XYRIS's Avatar
    Registered
    17/04/03
    Location
    Bever (1547)
    Posts
    10,442
    iTrader
    464 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/6

    "Verkoop gallerij"

    Hallo,

    IK weet niet of ik hier juist zit maar ik heb een heleboel spullen die
    ik te koop heb. Nu heb ik een webspace van Telenet.

    Graag had ik een soort van "tabel" bv 6 breed en zo diep ik objecten heb.

    6 vierkante kadertjes grote naargelang hoeveel 4 - 5 - 6 foto's op een breedte
    kunnen met daarin dus de foto.
    Daaronder dan precies een tekstvlak met korte info en de richtprijs

    De vraag is dan ook hoe ik dit makkelijk kan aanpassen als er iets bij moet
    of verwijderd moet worden.

    Ik werk met WSFTP voor vanalles op webspace te zetten.
    Pc: Intel Core i7-6700K Skylake | Asus Z170 Pro Gaming | 16GB DDR4 Corsair Vengeance LPX 3000MHz| Nvidia RTX 2060 Founders Edition |
    Samsung 840Pro 128gb & 850 evo 500gb & 2tb WD |BenQ XL2720Z 27" 144Hz |
    Laptop: ASUS N56V | Core I7 3610QM 2,3Ghz Turbo @3.3 | 16GB RAM | Samsung 830 SSD 256 GB | 15,6" FULL HD
    Nvidia Geforce GT 650M
    no votes  

  2. #2
    Arvin's Avatar
    Registered
    23/11/05
    Location
    Mechelen
    Posts
    154
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/2
    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>Verkoop gallerij</title>
    <style type="text/css">
    #container {position:relative; margin:auto; width:600px;}
    .itemwrap {float:left; width:100%;}
    .itemwrap img {float:left; width:100px; height:auto;}
    .itemwrap p {float:left; width:100%;}
    </style>
    </head>
    <body>
    <div id="container">
    	<div class="itemwrap">
    		<img src="Abeelding1_1.jpg" alt="afbeelding1_1" />
    		<img src="Abeelding1_2.jpg" alt="afbeelding1_2" />
    		<img src="Abeelding1_3.jpg" alt="afbeelding1_3" />
    		<img src="Abeelding1_4.jpg" alt="afbeelding1_4" />
    		<img src="Abeelding1_5.jpg" alt="afbeelding1_5" />
    		<img src="Abeelding1_6.jpg" alt="afbeelding1_6" />
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel lacinia turpis. Nunc eu pharetra ipsum. Fusce vitae metus mauris, at placerat mi. Suspendisse eget libero tortor, ultricies iaculis odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla porttitor mollis bibendum. Donec varius eros ut nibh commodo venenatis. Proin sit amet facilisis sem. Sed at nisi pulvinar neque fringilla tincidunt tempor eu dolor.</p>
    	</div>
    	<div class="itemwrap">
    		<img src="Abeelding2_1.jpg" alt="afbeelding2_1" />
    		<img src="Abeelding2_2.jpg" alt="afbeelding2_2" />
    		<img src="Abeelding2_3.jpg" alt="afbeelding2_3" />
    		<img src="Abeelding2_4.jpg" alt="afbeelding2_4" />
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel lacinia turpis. Nunc eu pharetra ipsum. Fusce vitae metus mauris, at placerat mi. Suspendisse eget libero tortor, ultricies iaculis odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla porttitor mollis bibendum. Donec varius eros ut nibh commodo venenatis. Proin sit amet facilisis sem. Sed at nisi pulvinar neque fringilla tincidunt tempor eu dolor.</p>
    	</div>
    </div>
    </div>
    </body>
    </html>

    Zoiets, maar dan beter uitgewerkt?
    Last edited by Arvin; 07-03-2012 at 18:11.
    no votes  

  3. #3
    Dieterg's Avatar
    Registered
    08/01/05
    Location
    Turnhout
    Posts
    1,182
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    9/9
    Wat je kan doen is werken met XML. Je zal 1x uw site moeten stijlen en dan kan je achteraf via XML elementen toevoegen/verwijderen..

    Wat je doet is je maakt een div aan op uw pagina die leeg is. In deze div kan je via jQuery en XML 'objecten' invoegen. Een XML file ziet er als volgt uit (sla dit bv op als gallerij.xml):
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
     <gallerijen>
       <gallerij>
         <title>XML Test</title>
    	 <afbeelding>http://www.9lives.be/forum/images/image1.jpg</afbeelding>
         <omschrijving>Dit is een omschrijving</omschrijving>
       </gallerij>
       <gallerij>
         <title>XML Test</title>
    	 <afbeelding>http://www.9lives.be/forum/images/image1.jpg</afbeelding>
         <omschrijving>Dit is een omschrijving</omschrijving>
       </gallerij>
       <gallerij>
         <title>XML Test</title>
    	 <afbeelding>http://www.9lives.be/forum/images/image1.jpg</afbeelding>
         <omschrijving>Dit is een omschrijving</omschrijving>
       </gallerij>
       <gallerij>
         <title>XML Test</title>
    	 <afbeelding>http://www.9lives.be/forum/images/image1.jpg</afbeelding>
         <omschrijving>Dit is een omschrijving</omschrijving>
       </gallerij>
       <gallerij>
         <title>XML Test</title>
    	 <afbeelding>http://www.9lives.be/forum/images/image1.jpg</afbeelding>
         <omschrijving>Dit is een omschrijving</omschrijving>
       </gallerij>
    </gallerijen>
    Zoals je kan zien is het niet moeilijk om hier gallerijen aan toe te voegen of verwijderen.

    Dit XML file kan je dan als volgt ophalen (gallerij.xml dezelfde map als index.html) en in dit geval deze code in de head van uw index.html file:
    PHP Code:
    $(document).ready(function() {
                    $.
    ajax({
                        
    type "GET",
                        
    url "gallerij.xml",
                        
    dataType "XML",
                        
    success: function(xml) {
                            $(
    xml).find('gallerij').each(function() {
                                
    site = $(this);
                                
                                var 
    title site.find('title').text();
                                var 
    afbeelding site.find('afbeelding').text();
                                var 
    omschrijving site.find('omschrijving').text();
                                
                                $(
    '#wrapper').append('<div class="gallerij"><h2>' title '</h2><img src="' afbeelding +'" alt=""/><p>' omschrijving '</p></div>');
                            });
                        }
                    });
                }); 
    Last edited by Dieterg; 07-03-2012 at 19:58.
    -
    no votes  

  4. #4
    XYRIS's Avatar
    Registered
    17/04/03
    Location
    Bever (1547)
    Posts
    10,442
    iTrader
    464 (100%)
    Mentioned
    0 Post(s)
    Reputation
    0/6
    Ken er niets van dus allemaal chinees :-)
    Pc: Intel Core i7-6700K Skylake | Asus Z170 Pro Gaming | 16GB DDR4 Corsair Vengeance LPX 3000MHz| Nvidia RTX 2060 Founders Edition |
    Samsung 840Pro 128gb & 850 evo 500gb & 2tb WD |BenQ XL2720Z 27" 144Hz |
    Laptop: ASUS N56V | Core I7 3610QM 2,3Ghz Turbo @3.3 | 16GB RAM | Samsung 830 SSD 256 GB | 15,6" FULL HD
    Nvidia Geforce GT 650M
    no votes  

  5. #5

    Registered
    14/08/10
    Location
    Diest
    Posts
    2,419
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Reputation
    8/16
    Dan kan je hier beter een jobaanbieding zetten, denk ik zo. Om alles over HTML uit te leggen (om dan nog te zwijgen van jQuery) zijn we lang bezig! Dan laat je het beter door iemand anders doen.

    Om Mam nog even bij te staan: jQuery zelf niet vergeten te includen in je index.html!
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in