Automatic Image loader Plugin

beam / 2009-10-28 18:08:47   

Hi,

Ive been trying to edit both the Iwakami plugin and slide viewer auto, so the images are on an simple automatic rotation/cycle with a fade transition, for example innerfade.

In this thread theres a small amount of code but i cant seem to integrate it into the Iwakami plugin.
But its a start.

I have installed an up to date version of jquery for use with other formats. So this will allow innerfade to run.
Just need help adding it to a plugin.

site

Any help and pointers is really appreciated,

thanks,

jaz / 2009-11-17 00:44:45   

Hello,

I am not very experienced with code, but would also find the above very helpful.

Thanks,

jaz / 2009-11-17 00:51:01   

I've uploaded the innerfade js and css

to my server in the appropriate indexhibit folders. BUT when I try to choose it under EXHIBITION FORMAT in indexhibit, there is no "innerfade" option available for me to choose.

Some help would be much appreciated!
Thanks very much!

Jaz

Vaska A / 2009-11-17 01:02:51   

Because there isn't an innerfade plugin for Indexhibit perhaps?

jaz / 2009-11-17 22:45:12   

Hey Vaska,

Thanks, yeah, that's what I thought.

Is there any way to modify the "slideshow" exhibition format so that it runs on auto, without "prev" and "next" buttons?!

I don't know much about complex-coding, but would an indexhibit plugin for innerfade be an easy thing to create?

;)

It's really a shame there isn't one... (although I still LOVE indexhibit, don't get me wrong)!

Thanks,
Jaz

lemathieu A / 2009-11-17 22:54:57   

Shame on you !
bouhhhh…

;)

Why are you not trying to simply ajust the innerfade in the slide viewer auto ?

jaz / 2009-11-17 23:12:25   

Hey lemathieu,

I understand. ;)

What should I change?! Is it complex?

I am a beginner and currently modifying your theme (The Centred).

Also, I need to change the dimensions for the images when they are featured in SLIDERPROAUTO mode. (they are appearing on my site at one size, at square dimensions).

Thanks very much!
Jaz

jaz / 2009-11-18 00:06:09   

How do I adjust the innerfade in the slide viewer auto?

All I know of is:

SliderProAuto

and Slideshow

Thanks!
Jaz

jaz / 2009-11-18 23:33:14   

Any help with the above would be very much appreciated!

Goal: to have images automatically fade, one over the other—

possibly by adjusting "innerfade" in "slide viewer auto" or by creating a plugin for innerfade for use in an indexhibit exhibition format.

Thanks very much,
Jaz

arsondpi / 2009-11-19 08:06:15   

...open the slideshow.php plugin and find line:

  1. timeout: 0, 

change it to something like:

  1. timeout: '2000', 

It's in the dynamicJS function.
If you want to read more on what/how timeout works, search through the jquery cycle all plugin options...
No need to keep bumping on this thread... Search - search - search.
That's what the rest of us do (and we're designers as well - in case you think that we're coders only).

jaz / 2009-11-19 21:30:59   

Wow cool, thanks very much.
sorry for the trouble!

I greatly appreciate your response and meant no disrespect (and definitely no insult to you as a designer)!

The design commmunity is definitely in debt to you (and all of the indexhibit authors) for your hard, dedicated (and sometimes volunteer) work.

Take care,
Jaz

Eikibleiki / 2010-03-11 10:53:01   

Why am I not able to get this to work. I have tried arsondpi method but I dont get any fade. I just have the prev/next buttons and no automatic slideshow.

Take a look:
www.segdusis.is

Eikibleiki / 2010-03-11 11:24:31   

sorry I was working on a wrong document

It works now : )

JeanboyL / 2010-03-17 19:19:58   

Hello arsondpi!Vaska! HELLO ALL! I need YOUR HELP :-)

PROBLEM :

Automatic random slideshow : first image of the serie is the only one not to come at random! (on my homepage : www.jeanlecrenier.com)

I followed this tip (great) :

...open the slideshow.php plugin and find line:
1. timeout: 0,

change it to something like:
1. timeout: '2000',

and I linked this slideshow plugin to the slideshow JS that I customized a bit to have the pictures at random.

The slidehow goes at random, BUT the first picture to come up is always the first picture from my pictures serie of the exhibit : who can help me? I put the JS and my Plugin here below. THANKS a bunch!

JS :

fx: 'fade', // one of: fade, shuffle, zoom, slideX, slideY, scrollUp/Down/Left/Right
speed: 4000, // speed of the transition (any valid fx speed value)
speedIn: 1000, // speed of the 'in' transition
speedOut: 1000, // speed of the 'out' transition
click: null, // @deprecated; please use the 'next' option
next: null, // id of element to use as click trigger for next slide
prev: null, // id of element to use as click trigger for previous slide
pager: null, // id of element to use as pager container
before: null, // transition callback (scope set to element to be shown)
after: null, // transition callback (scope set to element that was shown)
easing: null, // easing method for both in and out transitions
easeIn: null, // easing for "in" transition
easeOut: null, // easing for "out" transition
shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 }
animIn: null, // properties that define how the slide animates in
animOut: null, // properties that define how the slide animates out
cssBefore: null, // properties that define the initial state of the slide before transitioning in
cssAfter: null, // properties that defined the state of the slide after transitioning out
fxFn: null, // function used to control the transition
height: 'auto', // container height
sync: 1, // true if in/out transitions should occur simultaneously
random: true, // true for random, false for sequence (not applicable to shuffle fx)
fit: 0, // force slides to fit container
pause: 0, // true to enable "pause on hover"
autostop: 0, // true to end slideshow after X transitions (where X == slide count)
delay: 0 // additional delay (in ms) for first transition (hint: can be negative)
};

PLUGIN :

function dynamicJS()
{
global $timeout;
    return "$(document).ready(function(){
    $('#s1').cycle({
    fx:'fade',
    speed:'4000',
    speedIn:'1000',
speedOut:'1000',
    next:'#next', prev:'#prev'});
    });";
}

function createExhibit()
{
    $OBJ =& get_instance();
    global $rs;
    
    $pages = $OBJ->db->fetchArray("SELECT *
        FROM ".PX."media, ".PX."objects_prefs
        WHERE media_ref_id = '$rs[id]'
        AND obj_ref_type = 'exhibit'
        AND obj_ref_type = media_obj_type
        ORDER BY media_order ASC, media_id ASC");

        
    // ** DON'T FORGET THE TEXT ** //
    $s = $rs['content'];

    if (!$pages) return $s;
    
        $i = 1; $a = '';
    
    // people will probably want to customize this up
    foreach ($pages as $go)
    {
     $title         = ($go['media_title'] == '') ? '' : $go['media_title'] . ' ';
     $caption     = ($go['media_caption'] == '') ? ' ' : $go['media_caption'];

        //$x = getimagesize(BASEURL . GIMGS . '/' . $go['media_file']);
        
        $a .= "\n

{$title}{$caption}

\n";
        
        $i++;
    }
    
    // images
    $s .= "\n";
    $s .= "\n";
    $s .= $a;
    $s .= "\n";
    $s .= "\n\n";
        
    return $s;
}

function dynamicCSS()
{
    return "#num {padding-left: 6px;}
    .img-bot {margin-bottom: 6px; display: block; }";
}

?>

liesbethc / 2011-08-14 08:37:13   

Hi, I solved the problem of the first image not being random by adding the following lines (in bold) to the cycle plugin.

// ** DON'T FORGET THE TEXT ** //
$s = $rs['content'];
$s .= "nn";
if (!$pages) return $s;

$a = '';

$max = count($pages); // determines nr of images in pages vector and names this max
$randomnr=rand(0,$max-1); // defines a random number between 0 and max
$go = $pages[$randomnr]; // makes sure the slidesshow starts with a random image, before starting the random cycle as defined below

//now copy the lines starting with $imageSize , $imageurl and $a = that are just below (in //prepare images)
$imageSize = getimagesize(BASEURL . GIMGS ."/$go[media_file]");
$imageurl = BASEURL . GIMGS . "/$go[media_file]";
$a .= " n";

// prepare images
foreach ($pages as $go)
{
$imageSize = getimagesize(BASEURL . GIMGS ."/$go[media_file]");
$imageurl = BASEURL . GIMGS . "/$go[media_file]";
// $a .= " n";
$a .= " n";

}


That should work,
Liesbeth

sodapop / 2011-12-13 13:38:50   

Hi all,

I know there are many threads on the auto slideshow already on the forum. I can't seem to get mine working and was hoping you guys can help.

I would like a slideshow transition to be automatic like this site: http://www.segdusis.is/

My site is currently like this:
http://www.test.drewmandelarchitects.com

I can't seem to get rid of the long delay in the beginning before the auto slideshow begins. Is it really just because my jsquery is not updated to most recent? I would still like to use the Thickbox gallery plugin on my other galleries. From what I understand, Thickbox won't work anymore if I update jsquery.

The only change I have done is revise these in slideshow plugin:

  1. function dynamicJS()
  2. {
  3.     global $timeout;
  4.     return "$(document).ready(function(){ 
  5.     $('#s1').cycle({
  6.     fx:'fade', 
  7.     speed:'4000', 
  8.     timeout:'4000',
  9.     delay:'0', 
  10.     next:'#next', prev:'#prev'});
  11.     });";
  12. }

Thanks in advance.

Vaska A / 2011-12-13 13:58:29   

Your url doesn't work...found it here...

http://www.drewmandelarchitects.com/test/

The slowness, on the main page, has to do with the load time of the images. I'm not on the fastest connection but it takes some time for everything to load.

sodapop / 2011-12-13 16:31:21   

Sorry. What if you try this link?
www.test.drewmandeldesign.com
Same slowness?

pernin / 2011-12-13 16:52:55   

it's fast enough for me, but I'm on a fast line. Images at 2-600 kB each can make even normal connections seem sluggish: your slideshow needs to load over 2 MB (16 Mbits) worth of images. Check the speed of your connection (effective), it may simply be that.

sodapop / 2011-12-13 17:11:52   

Thanks all, for your feedback.

Are you saying that they auto slideshow will need to load all the images first and then begin 'flipping' through? Is that why there is a delay before everything begins to 'flip'? I will try to minimize the size of the images and see how it goes.

pernin / 2011-12-13 17:39:14   

we usually recommend around 150 kB for each image, which is more than enough for web quality, but that refers to what the server may be able to handle during image upload

yes, slideshow preloads all images. check your effective connection speed (it usually is a lot lower than what the hosting plan announces), and anyway, think that your visitors may have slower connections: the 10 seconds rule is still valid, and nowadays, with widespread faster connections, I'd say 5 seconds may seem sluggish

sodapop / 2011-12-14 21:10:48   

Hi all,
I have revised based on your suggestions. However, my issue wasn't able to get resolved :(

www.test.drewmandeldesign.com

I have it on auto slideshow. The images flip correctly but before they even all begin to flip in the auto slideshow, the slideshow stays on the first image for about 30 seconds. Very strange. I don't think it is an image loading issue? Could it be a timing thing in some code that I am missing?

Again, I haven't updated my jsquery file because I still need to use Thickbox. Any other suggestions? Much appreciated.

sodapop / 2011-12-14 22:04:22   

Hi all,
I have seemed to solve it! Makes me very happy. I did more hunting and interpreting on the forum and ended up downloading jquery.cycle.lite.js and exhibit.cycle.php plugin. took out all instances of jquery.cycle.lite.1.0.js and revised to jquery.cycle.lite.js. tweaked the time in the cycle.php and BOOM everything fell into place.
Thank you all again for checking things out on my page for me!
Vaska and team, you make a great product. Can't wait for the new update!

This thread has been closed, thank you.