PHP directory images, wil image in pop-up ipv nieuwe tab

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan te Pas

Jan te Pas

10/05/2017 12:11:46
Quote Anchor link
Ik heb de volgende broncode die erg gemakkelijk werkt. Nu wil ik graag een beeld die gekozen is in een pop-up laten komen. Weet iemand hier raad? Want het effect 'hover' moet niet in de pop-up aanwezig zijn.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!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>Galerij images</title>
<style type="text/css">
*{margin:0;padding:0;}
body
{
    background:#fff;
}
img
{
    width:auto;
    box-shadow:0px 0px 20px #cecece;
    border-radius: 5px;
    -moz-transform: scale(0.7);
    -moz-transition-duration: 0.6s;    
    -webkit-transition-duration: 0.6s;
    -webkit-transform: scale(0.7);
    
    -ms-transform: scale(0.7);
    -ms-transition-duration: 0.6s;    
}
img:hover
{
     box-shadow: 20px 20px 20px #dcdcdc;
     border-radius: 5px;
    -moz-transform: scale(0.8);
    -moz-transition-duration: 0.6s;
    -webkit-transition-duration: 0.6s;
    -webkit-transform: scale(0.8);
    
    -ms-transform: scale(0.8);
    -ms-transition-duration: 0.6s;
    
}
#header
{
    width:100%;
    height:24px;
    background:#DD4F00;
    font-family:"Lucida Handwriting";
    font-family:Verdana, Geneva, sans-serif;
    text-align:center;
    font-size:16px;
    font-weight:bolder;
    color:#f9f9f9;
}
#footer
{
    width:100%;
    height:20px;
    background:#DD4F00;
    font-family:"Lucida Handwriting";
    font-family:Verdana, Geneva, sans-serif;
    text-align:center;
    font-size:12px;
    font-weight:bolder;
    color:#f9f9f9;
}

#body
{
    margin:0 auto;
    text-align:center;
}
</style>
</head>
<body>
<div id="header">
    <label>Images in directory</label>
</div>
<div id="body">
<?php
$folder_path
= 'images/'; //image's folder path

$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);

$folder = opendir($folder_path);
 
if($num_files > 0)
{

    while(false !== ($file = readdir($folder)))
    {

        $file_path = $folder_path.$file;
        $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
        if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp')
        {

            ?>

            <a href="<?php echo $file_path; ?>" target="_blank"><img src="<?php echo $file_path; ?>" height="250" /></a>
            <?php
        }
    }
}

else
{
    echo "Sorry, no images in this directory!";
}

closedir($folder);
?>

<div id="footer">
    <label>http://www.codingcage.com/2015/06/creating-image-gallery-from-folder-php.html</label>
</div>
</div>
</body>
</html>


- Ariën -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken i.p.v. quote-tags.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 10/05/2017 13:36:13 door - Ariën -
 
PHP hulp

PHP hulp

08/05/2021 22:29:36
 
John D

John D

10/05/2017 13:12:23
Quote Anchor link
Probeer het eens met Lightbox, http://bjornsimmering.nl/lightbox-maken-voor-je-fotos/
Gewijzigd op 10/05/2017 13:14:50 door John D
 
Thomas van den Heuvel

Thomas van den Heuvel

10/05/2017 13:18:32
Quote Anchor link
En gebruik [code][/code] in plaats van [quote][/quote] voor code alsjeblieft...
 
Jan te Pas

Jan te Pas

10/05/2017 13:56:30
Quote Anchor link
Dank voor de richting om te zoeken.

Dit is het cruciale deel:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<a href="<?php echo $file_path; ?>" target="_blank"><img src="<?php echo $file_path; ?>" height="250" /></a>


Ik krijg met lightbox geen pop-up maar beiden naast elkaar.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<a class="<?php echo $file_path; ?>" href="<?php echo $file_path; ?>" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="<?php echo $file_path; ?>" alt="" /></a>


De animatie, hover, blijft ook aanwezig. Ik ben er niet uit.
 
Ramon van Dongen

Ramon van Dongen

10/05/2017 13:57:59
Quote Anchor link
Quote:
De animatie, hover, blijft ook aanwezig. Ik ben er niet uit.

Ook niet heel gek, de hover heb je ingesteld voor alle images in je css. Wellicht helpt het als je dit in een bepaalde class zet en deze in de popup niet toepast op de afbeeldingen.
 
Jan te Pas

Jan te Pas

10/05/2017 14:18:53
Quote Anchor link
Ik heb daar even mee gestoeid. En nu werkt het. Echter witte kader om foto is nog erg groot. Demo is hier te zien:
http://www.resume.pe.hu/beeldbankkopie.php
Ik zal in de CSS nog iets moeten aanpassen. Tips, graag. Dank voor de richting!
 
John D

John D

10/05/2017 14:41:29
Quote Anchor link
In lightbox zijn ook parameters te zetten om kader uit te schakelen dacht ik (alweer lang geleden, lightbox)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.