4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
October 17, 2018, 11:44:32 AM

Login with username, password and session length
Search:     Advanced search
You're looking for some 4images templates and styles? Then visit this thread to show websites with 4images templates to download.
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Templates & Styles (Releases & Support) (Moderator: Rembrandt)
| | |-+  [Style] Fullscreen Random Background Image
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Print
Current Topic Rating: *****
Author Topic: [Style] Fullscreen Random Background Image  (Read 12097 times)
x23piracy
Sr. Member
****
Offline Offline

Posts: 420

Thank You
-Given: 48
-Receive: 41


View Profile WWW
« on: November 16, 2010, 09:49:51 AM »

Hi,

this changes randomly (page reload) the background image in your galery.
For me it's used for the hole galery but it can be easily adapted to work
for different categories or template html files...

Before we begin some examples (press strg while clicking on image):




Here we go:

Step 1

Add this to your style.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}



Step 1.2

This step is important, else you will just see the background image

In your style.css locate you main container (normally "container") and set:

1
position: relative;



Step 2

Create a file called "randombg.php" and paste:

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
<?php
#FILE: random_image.php - Version 1.3
#
#INSTALLATION INSTRUCTIONS:
# 1) Save this php code to your server.
# 2) Make sure the script has execute permissions.
# 3) Make sure your $IMAGE_DIRECTORY has read permissions, as well
# as the files within that directory.
# 4) Change:
# $IMAGE_DIRECTORY = "../pictures/";
# as described in the php code below.
# 5) Make your IMG tag look similar to the following:
# <IMG SRC="/scripts/random_image.php" ALT="">
#
#ABOUT THIS SCRIPT:
#       This is a very simple php script. All it does is grab a 
#random image from a directory and print it out, hiding the actual
#filename of the image displayed. Currently, this
#script just works with gif and jpg/jpeg images. 
#
#HISTORY:
# ??/??/?? 1.3 Updated and streamlined the code with
# release of java version
# ??/??/?? 1.2 Updated with ASP release
# ??/??/?? 1.1 Original release
#
#AUTHOR:
# http://www.davelozinski.com/scripts
#
#BEGIN CONFIGURATION ITEMS:
#The full path listing to the directory which contains the images
#to be randomly chosen and displayed. 
#Unix users should be able to get away with specifying a relative path.
#NT users may have to specify the full system path, which will probably
#need to look similar to: 
#"c:\\wwwroot\\htdocs\\images\\" or
#"f:/Inetpub/wwwroot/images/"
$IMAGE_DIRECTORY "";

###Nothing below this line should need to be configured.###
$line "";
$randomNumber0;
$imageFiles = array();
$fileName "";
$x=0;
if (
$DIR opendir($IMAGE_DIRECTORY)) {
while ($fileName readdir($DIR)) {
if (is_dir($IMAGE_DIRECTORY $fileName)) { continue; }
if (!preg_match("/\w/"$fileName)) { continue; }
if (preg_match("/\.gif$|\.jpg$|\.jpeg$/i",$fileName)) {
$imageFiles[$x] = $fileName;
$x+=1;
}
}
closedir($DIR);
srand((double)microtime()*1000000);
$randomNumber rand(0,(count($imageFiles) - 1));
Header ("Pragma: no-cache\n");
if (preg_match("/\.gif$/i",$imageFiles[$randomNumber])) {
Header ("Content-type: image/gif\n\n");
} elseif (preg_match("/\.jpg$|\.jpeg$/i",$imageFiles[$randomNumber])) {
Header ("Content-type: image/jpg\n\n");
} else { #Not a gif or jpeg file. Exit the program.
exit;
}
$fp fopen ($IMAGE_DIRECTORY $imageFiles[$randomNumber], "rb");
echo (fread($fp,filesize($IMAGE_DIRECTORY $imageFiles[$randomNumber])));
fclose($fp);
}
exit;
# random_image.php
?>



Step 2.1

in randombg.pgp set the path to your background images:

1
$IMAGE_DIRECTORY = "";



Step 3

Place this in every template file where you want to display the background image:

1
<img border="0" src="randombg.php" class="bg">


All done



Tips

You can also point $IMAGE_DIRECTORY = ""; to your data directory for use with
background images out of the category where you within.


Greetz X23

* 1.jpg (205.76 KB - downloaded 133 times.)
* 2.jpg (183.15 KB - downloaded 44 times.)
* 3.jpg (179.12 KB - downloaded 50 times.)

Follow members gave a thank to your post:
Sumale.my

For this post, 1 member gave a thank you!
« Last Edit: November 16, 2010, 11:43:14 PM by x23piracy » Logged


Don't trust in md5 it's unsafe change your 4i galerys password hash algorythm! second pw db field, create new hashes over some time, deny old hash. Help members that cry, send informationen mail to the rest. Camouflage new pw hash in cookie. Done!

--(◔̯◔)--
Jan-Lukas
Addicted member
******
Offline Offline

Posts: 1280

Thank You
-Given: 153
-Receive: 52


View Profile WWW
« Reply #1 on: November 16, 2010, 08:05:00 PM »

Hast Du keinen Platz für die Bilder, wo keine Werbung das Bild versperrt ?
Logged

Danke Harald



x23piracy
Sr. Member
****
Offline Offline

Posts: 420

Thank You
-Given: 48
-Receive: 41


View Profile WWW
« Reply #2 on: November 16, 2010, 08:30:49 PM »

Hast Du keinen Platz für die Bilder, wo keine Werbung das Bild versperrt ?

fixed...

Der Ü-Ei Mann Smile Ich hab noch ne Schlumpfine mit Springseil... (80er)


Gruß Jens
« Last Edit: November 17, 2010, 01:17:27 AM by x23piracy » Logged


Don't trust in md5 it's unsafe change your 4i galerys password hash algorythm! second pw db field, create new hashes over some time, deny old hash. Help members that cry, send informationen mail to the rest. Camouflage new pw hash in cookie. Done!

--(◔̯◔)--
Sumale.my
Addicted member
******
Offline Offline

Posts: 1773

Thank You
-Given: 169
-Receive: 86

Neverdie


View Profile
« Reply #3 on: November 16, 2010, 11:22:41 PM »

Sehr nett, aber das werde ich nicht einsetzen können, weil das einfach ganz schön viel laderrei für die Seite ist!
Auf kleinen Seiten ist das sicherlich was ganz tolles.

Wenn du ein weitere schreiben würdest, womit man den Hintergrund durch "Hintergrundfarbe" ändern kann, wäre das super Very Happy

Wenn du Hilfe brauchst, schreib mir!
Logged
x23piracy
Sr. Member
****
Offline Offline

Posts: 420

Thank You
-Given: 48
-Receive: 41


View Profile WWW
« Reply #4 on: November 16, 2010, 11:30:30 PM »

Sehr nett, aber das werde ich nicht einsetzen können, weil das einfach ganz schön viel laderrei für die Seite ist!
Auf kleinen Seiten ist das sicherlich was ganz tolles.

Wenn du ein weitere schreiben würdest, womit man den Hintergrund durch "Hintergrundfarbe" ändern kann, wäre das super Very Happy

Wenn du Hilfe brauchst, schreib mir!

Hi,

laderei ich bitte dich das ist ne Bildergalerie da wird ständig was geladen Wink
(Ich nehme an du redest von Seiten mit richtig viel "Verkehr")

Hintergrundfarbe? Du meinst anstatt einem Bild einfach eine wechselnde Farbe
oder die möglichkeit auf klick zu wechseln?

Ich frag dich erst wenn mir google nicht hilft Wink  Good


Gruß Jens
« Last Edit: November 17, 2010, 01:16:21 AM by x23piracy » Logged


Don't trust in md5 it's unsafe change your 4i galerys password hash algorythm! second pw db field, create new hashes over some time, deny old hash. Help members that cry, send informationen mail to the rest. Camouflage new pw hash in cookie. Done!

--(◔̯◔)--
al3aredh
Newbie
*
Offline Offline

Posts: 18

Thank You
-Given: 0
-Receive: 0

hguhf


View Profile WWW
« Reply #5 on: February 04, 2015, 07:11:23 PM »

thanks
« Last Edit: February 04, 2015, 08:09:43 PM by Rembrandt » Logged
Pages: [1] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.074 seconds with 22 queries.
Post your comments here