jQuery Forum

Thanks for it, it is an excellent way for including images. 

what am I doing wrong? The page keeps loading without success..

Thank you ! is working perfectly now !

Here's the way i do it.

Javascript / Jquery:

function slider(data) {
    $("#thumb-list").remove(); //remove the actual thumb list if exist
    $("#supersized").empty(); //remove the background image if exist
    $.supersized({
        slide_interval          :   5000,        // Length between transitions
        transition              :   1,             // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
        transition_speed        :    700,        // Speed of transition
        autoplay                :   1,
        horizontal_center        :   1,
        slides                     :      data
    });
}

 

PHP:
$imgpath = "images/slidehome/";
$data = array(
    array(
        "image" => $imgpath."foto4.jpg",
        "title" => "Title of the image",
        "thumb" => $imgpath."thumb/foto1.jpg",
        "url" => "http://www.theurl.com/"

);

In your html before </head>

<script>
var slideinicio = <?=json_encode($data);?>;
$(function() { slider(slideinicio); });
</script>


If you want to change total images/thumbs and background with ajax and mysql Just add this codes:

Javascript/Jquery

 

//obj is the parameter for the mysql query

function bgslide(obj) {

            $.ajax({

                       url: 'bgslide.php?obj='+obj,

                       dataType: 'json',

                       success: function( data ){

                                   slider(data);

                       }

            });

}

 

PHP / MYSQL

File from you get the data (bgslide.php):

 

global $data;
$sql = "SELECT * FROM yourtable WHERE house = 'yours' ";

//the query its just and example

$result =  mysql_fetch_array($sql);
$data = array();
   
foreach ($result as $row):
        $data[] = array(
            "image" => $row['imagepath'],
            "title" => $row['titulo'],
            "thumb" => $row['thumbpath'],
            "url" => $row['imageurl'],
        );
endforeach;

 

How to use it

 

<a href=”javascript:void(0);” onclick=” bgslide(12)”>Load Gallery</a>

hi can someone help me please i got blank page
i copy and paste your code but still get this blank page
if someone can help

thanks

http://www.yakoo.mrbutterfly.fr/test/fade.html

can you help please?still have blank page

Works for me, try clearing browser cache

Hi,

I am having trouble getting the supersize plugin to load images. Here is the location of the page I am trying to create: http://stefanyshyn.ca/NewSiteV3/portfolio/Weddings/demo.php

Everything works in IE9, FF10.0.2, Chrome and Safari... but no images load in older versions of IE (for example my girlfriend still has IE7 on her laptop and nothing loads).

Thanks for all the info everyone!

So since I'm a PHP noob it took me a while to figure this out but if you're building for a client and would rather not have to explain that extensions are case sensitive and/or you want to include PNG images, you can change the code to:

many thx to all of you!
pretty additional ideas too

tested with Camino 2.1 & Firefox 3.6.15 on PPC.

one question: is there a way for preloading and caching to integrate here into?

this following slice of php-code did work finally, for me - after many unsuccessfully trials ;-(

1.                     slides                     :      [<?php
2. //path to directory to scan
3. $directory = "images/";
4. //get all image files with a .jpg extension.
5. $images = glob($directory . "*.{jpg,JPG,jpeg,JPEG,png,PNG}", GLOB_BRACE);
6. //print each file name
7. $number = count($images);
8. $start = 0;
9. foreach($images as $image)
10. {
11. echo "{image : './" . $image . "', title : '" .$image . "'}";
12. if ($start < $number - 1)
13.     echo ", ";
14. $start = $start + 1;
15. }
16. ?>                                                                                           ],

It looks like JSON code. If so, you will have to rely on the kindness of the browser for caching. You can request the images in you jQuery, but it’s not "pre-loading".

Hello, i use the json method of  lickybuay , thx for script but there is some little bugs when another supersized gallery is load. 

@ JΛ̊KE
thx! it may be allright like it is :-)

Hi guys,

Just a quick question, i am trying pass an array with all my images created with javascript but for some reason is only displayed the last one.Check the array and contains all images but on the page only shows one
Can anyone tell what am i doing wrong?

var arr = [];var src="";var temp = [];
            jQuery(function($){
                $('#gallery a').each(function(){
                    src = $(this).find('img').attr('src');
                    temp['image'] = src
                    temp['url'] ="link";
                    console.log(temp['image'], temp['url']);
                    arr.push(temp);
                });
                console.log(arr.length);
                $.supersized({
               
                    // Functionality
                    slide_interval          :   3000,        // Length between transitions
                    transition              :   1,             // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                    transition_speed        :    700,        // Speed of transition
                                                              
                    // Components                           
                    slide_links                :    'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                    slides: arr
                });
            });




Thanks