search

justang87 / galleriffic

Automatically exported from code.google.com/p/galleriffic
0 stars 0 forks source link

Prevent all thumbnails from loading first #91

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
I really like this plugin. I am trying to use it with over 900 images in a 
gallery. Im trying to load one page of images at a time so that the main 
image will appear quicker. I have gone through other post with the same 
problem and tried those things here is my settings am I missing something? 
Any help would be greatly appreciated. 

 // Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay: 25,
                    numThumbs: 12,
                    preloadAhead: 12,
                    enableTopPager: true,
                    enableBottomPager: true,
                    maxPagesToShow: 10,
                    imageContainerSel: '#slideshow',
                    controlsContainerSel: '#controls',
                    captionContainerSel: '#caption',
                    loadingContainerSel: '#loading',
                    renderSSControls: true,
                    renderNavControls: true,
                    playLinkText: 'Play Slideshow',
                    pauseLinkText: 'Pause Slideshow',
                    prevLinkText: '‹ Previous Photo',
                    nextLinkText: 'Next Photo ›',
                    nextPageLinkText: 'Next ›',
                    prevPageLinkText: '‹ Prev',
                    enableHistory: false,
                    autoStart: false,
                    syncTransitions: false,
                    defaultTransitionDuration: 900,
                    onSlideChange: function(prevIndex, nextIndex) {
                        // 'this' refers to the gallery, which is 
an extension of $('#thumbs')
                        this.find('ul.thumbs').children()

.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()

.eq(nextIndex).fadeTo('fast', 1.0);
                    },
                    onPageTransitionOut: function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    },
                    onPageTransitionIn: function() {
                        this.fadeTo('fast', 1.0);
                    }
                });

                /**** Functions to support integration of 
galleriffic with the jquery.history plugin ****/

                // PageLoad function
                // This function is called when:
                // 1. after calling $.historyInit();
                // 2. after calling $.historyLoad();
                // 3. after pushing "Go Back" button of a browser
                function pageload(hash) {
                    // alert("pageload: " + hash);
                    // hash doesn't contain the first # character.
                    if (hash) {
                        $.galleriffic.gotoImage(hash);
                    } else {
                        gallery.gotoIndex(0);
                    }
                }

                // Initialize history plugin.
                // The callback is called at once by present 
location.hash. 
                $.historyInit(pageload, "advanced.html");

                // set onlick event for buttons using the jQuery 
1.3 live method
                $("a[rel='history']").live('click', function(e) {
                    if (e.button != 0) return true;

                    var hash = this.href;
                    hash = hash.replace(/^.*#/, '');

                    // moves to a new page. 
                    // pageload is called at once. 
                    // hash don't contain "#", "?"
                    $.historyLoad(hash);

                    return false;
                });

/**************************************************************************
**************/
            });

Original issue reported on code.google.com by cbas0...@gmail.com on 3 Mar 2010 at 5:02

GoogleCodeExporter commented 9 years ago 
My understanding is that preload ahead preloads the IMAGES and not the 
thumbnails. I'm 
having this problem too, as it destroys bandwidth.

Original comment by chriscar...@gmail.com on 30 May 2010 at 11:44

GoogleCodeExporter commented 9 years ago 
I've come up with a solution to the issue!!! I basically had to re-work the 
galleriffic.js file to include a new processor for the thumbnail preload, as 
well as the html format.  I spent some of last weekend and this morning 
figuring this out. I'm going to see about working with the author to include my 
changes. Also, I'm trying to add a "start on image #x" feature too. That way 
you'll be able to have quick-links to certain images in your gallery.  Oh, and 
there's still one defect in my code so I don't want to release it quite yet.

- Todd
- irontodd@comcast.net
- My Dev site: http://irontodd.home.dyndns.org/Mvc

Original comment by todd.m.m...@gmail.com on 7 Aug 2010 at 6:44

GoogleCodeExporter commented 9 years ago 
i am also having the same issue as you .. i am using gallerfic with 2000 
images. so i would like to disable preloading of the thumbnails.   any chance 
you can give me some pointers on what i can do to he galleriffic.js to disable 
the preloading

Original comment by zubi...@gmail.com on 18 Oct 2010 at 5:57

GoogleCodeExporter commented 9 years ago 
OK, so I've been using the gallery for a few months now, and all seems to be 
going well. Now, I don't take credit for coming up with the ideas on how to get 
basic preloading to work, just modified and added some code to allow for the 
same functionality for the thumbnails.  I'm going to attach my code file here, 
use it at your own risk. I haven't gotten a chance to get this thing integrated 
into official galleriffic. I'm not using this on a high-traffic site, just a 
personal photoblog.. 
http://irontodd.home.dyndns.org/House/Living%20Room%20Remodel is my largest 
picset at around 300 pix. 

the other thing I had to do is change the IMG tag. By default, setting the SRC 
attribute causes the image to be loaded automatically. My workaround was to 
create an additional attribute (SRC2) to hold the path temporarily, maybe not 
the best way to do it, but it works. so the HTML needs to look like this:

            <li>
                <a class="thumb" name="someName" href="fullsizeImage.JPG" title="someTitle">
                    <img src="1x1placeholder.gif" src2="thumbnailImage.JPG" alt="alternateText" id="imageId" />
                </a>
                <div class="caption">
                    <div class="download">
                        <a href="linkForImage">Download Original</a>
                    </div>

                    <div class="image-title"></div>
                    <div class="image-desc"></div>
                </div>
            </li>

once you've gotten the html all set up, the call to launch the gallery changes 
too...
For my use, I added the following to the page that holds the gallery
<script type='text/javascript'>
var gallery;
var numberOfThumbs = 7;
var startImage = 197;
jQuery(document).ready(function($) {
    SetUpGallerific(numberOfThumbs, startImage);
}); 

jQuery(document).unload(function($){
    gallery = null;

});
</script>

and added this to my personal js file:

function SetUpGallerific(numberOfThumbs, startImageIndex) {
    $('div.navigation').css({ 'width': '70px', 'float': 'left', 'margin-top': '75px' });
    $('div.content').css('display', 'block');
    var onMouseOutOpacity = 0.67;
    $('#thumbs ul.thumbs li').opacityrollover({
        mouseOutOpacity: onMouseOutOpacity,
        mouseOverOpacity: 1.0,
        fadeSpeed: 'fast',
        exemptionSelector: '.selected'
    });
    gallery = $('#galleriffic').galleriffic({
        delay: 2500,
        numThumbs: numberOfThumbs, // The number of thumbnails to show per page
        preloadAhead: 1, // Set to -1 to preload all images (big images)
        enableTopPager: true,
        enableBottomPager: false,
        maxPagesToShow: 10, // The maximum number of pages to display in either the top or bottom pager
        imageContainerSel: '#slideshow',
        controlsContainerSel: '#controls',
        captionContainerSel: '#caption',
        loadingContainerSel: '#loading',
        renderSSControls: true,
        renderNavControls: true,
        playLinkText: 'Play Slideshow',
        pauseLinkText: 'Pause Slideshow',
        prevLinkText: '< Previous Photo',
        nextLinkText: 'Next Photo >',
        nextPageLinkText: '>>',
        prevPageLinkText: '<<',
        enableHistory: false,
        autoStart: false,
        syncTransitions: true,
        defaultTransitionDuration: 900,
        onSlideChange: function(prevIndex, nextIndex) {
            // 'this' refers to the gallery, which is an extension of $('#thumbs')
            this.find('ul.thumbs').children()
                .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                .eq(nextIndex).fadeTo('fast', 1.0);
        },
        onPageTransitionOut: function(callback) {
            this.fadeTo('fast', 0.0, callback);
        },
        onPageTransitionIn: function() {
            this.fadeTo('fast', 1.0);
        },
        startImage: startImageIndex, // defines the thumbnail to go to on page load
        pagesOfThumbsToPreload: 2 // defines how many pages of thumbs to preload
    });
}

NEW ADDITIONAL DEFAULTS:
        startImage: 1, // defines the thumbnail to go to on page load
        pagesOfThumbsToPreload: 2 // defines how many pages of thumbs to preload

2 pages seemed to make sense to me... the current page and the next one.
startImage: will allow you to launch a specific pic, all set in with your 
pager.. Say you don't want to wait to get to picture 1534, but you really want 
to have a quick link to that pic, you can put it in there... kinda like what 
happens at this link:
http://irontodd.home.dyndns.org/House/Living%20Room%20Remodel/197

Original comment by todd.m.m...@gmail.com on 19 Oct 2010 at 12:01

Attachments:

GoogleCodeExporter commented 9 years ago 
Thank you for your script.. it helped me a lot. 
Only thing I would like to point out for future visitors that you need to 
specify id on thumbnails or it won't work.
Again thanks :)

Original comment by papirusp...@gmail.com on 25 Jan 2011 at 5:01

GoogleCodeExporter commented 9 years ago 
Is there some way to implement this fix into ModX Gallery Galleriffic plugin? 
This is exactly what I need! :-)

Original comment by benjamin...@hotmail.com on 6 Aug 2011 at 3:13

GoogleCodeExporter commented 9 years ago 
Please anyone? Or else a pre-intergrated package of Galleriffic? It would be a 
great and necessary addition to this great album script. :-)

Original comment by benjamin...@hotmail.com on 18 Aug 2011 at 5:57

GoogleCodeExporter commented 9 years ago 
thank you so much!

im using a wordpress version of this plugin called photospace. is it possible 
to take your edits and implement it in the wordpress version?  (i am new to 
coding)

Original comment by li.phil...@gmail.com on 10 Jun 2012 at 4:20

GoogleCodeExporter commented 9 years ago 
I too like this plugin. I'm using with over than 700 images in the 
gallery. I'm trying to load one page of images at a time so that the main 
image will appear quicker. I have gone through other post with the same 
problem and tried those things here is my settings am I missing something? 
Any help would be greatly appreciated. 

*********************************************************
<script type="text/javascript">
    var gallery;
    var oldmeasure  = { width: 0, height: 0 };
    var oldstr      = "";
    var LIGHTBOX    = 0;

    var numberOfThumbs      = 15;
    var startImage          = 0;
    var delay               = 2500;
    var transitionDuration  = 900;
    var autostart = "false";
    $(document).ready(function($) {
        SetUpGallerific(numberOfThumbs, startImage, delay, transitionDuration, autostart);
    }); 
    $(document).unload(function($){
        gallery = null;
    });
</script>

function SetUpGallerific(numberOfThumbs, startImageIndex, delay, 
transitionDuration, autostart) {
        // We only want these styles applied when javascript is enabled
    $('div.navigation').css({'width' : '300px', 'float' : 'left'});
    $('div.content').css('display', 'block');

    var onMouseOutOpacity = 0.67;
    $('#thumbs ul.thumbs li').opacityrollover({
        mouseOutOpacity: onMouseOutOpacity,
        mouseOverOpacity: 1.0,
        fadeSpeed: 'fast',
        exemptionSelector: '.selected'
    });
    gallery = $('#thumbs').galleriffic({
        fullimagesize: { 'w': 500, 'h':500 },
        delay: delay,
        numThumbs: numberOfThumbs, // The number of thumbnails to show per page
        preloadAhead: 1, // Set to -1 to preload all images (big images)
        enableTopPager: true,
        enableBottomPager: true,
        maxPagesToShow: 7, // The maximum number of pages to display in either the top or bottom pager
        imageContainerSel: '#slideshow',
        controlsContainerSel: '#controls',
        captionContainerSel: '#caption',
        loadingContainerSel: '#loading',
        renderSSControls: true,
        renderNavControls: true,
        playLinkText: 'Play Slideshow',
        pauseLinkText: 'Pause Slideshow',
        prevLinkText: '‹ Previous Photo',
        nextLinkText: 'Next Photo ›',
        nextPageLinkText: 'Next ›',
        prevPageLinkText: '‹ Prev',
        enableHistory: false,
        enableKeyboardNavigation: false,
        autoStart: autostart,
        syncTransitions: true,
        defaultTransitionDuration: transitionDuration,
        onSlideChange: function(prevIndex, nextIndex) {
            // 'this' refers to the gallery, which is an extension of $('#thumbs')
            this.find('ul.thumbs').children()
                .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                .eq(nextIndex).fadeTo('fast', 1.0);
        },
        onPageTransitionOut: function(callback) {
            this.fadeTo('fast', 0.0, callback);
        },
        onPageTransitionIn: function() {
            this.fadeTo('fast', 1.0);
            if(LIGHTBOX){
                //$('#jquery-lightbox').html( $('#gallery').html() );
            }
        },
        startImage: startImageIndex,
        pagesOfThumbsToPreload: 2,
        repeatSlideShow: false // slideshow loops around once
    });
}

*********************************************************

Original comment by peter4te...@gmail.com on 16 Jul 2013 at 2:26

Attachments:

GoogleCodeExporter commented 9 years ago 
Peter, what does your HTML look like for the page? All your script code appears 
fine to me.

the thing I'm most curious about is your img tag for the thumbnails.. I had to 
use some basic placeholder file in the src attribute, and add an additional 
attribute src2 that ultimately holds the thumbnail image name. also, as noted 
above you'll need to populate the img id attribute with a unique value for each 
image on the page.  Here is an excerpt of 2 consecutive tags on my currently 
running site with this plugin.
I hope this helps.

            <li>
                <a class="thumb" name="DSC_1236.JPG" href="/Images/House/Projects 2010/Living Room Remodel/DSC_1236.JPG?maxwidth=600&maxheight=600" title="DSC_1236.JPG">
                    <img src="/images/spacer.gif" src2="/Images/House/Projects 2010/Living Room Remodel/DSC_1236.JPG?maxwidth=60&maxheight=60" alt="DSC_1236.JPG" id="image3" />
                </a>
                <div class="caption">
                    <div class="download">
                        <a href="/Images/House/Projects 2010/Living Room Remodel/DSC_1236.JPG" >Download Original</a>
                    </div>
                    <div class="image-title"></div>
                    <div class="image-desc">
                        Rachel is excited to make the first hole<br />3/3/2010 10:00:50 PM
                    </div>

                </div>
            </li>
            <li>
                <a class="thumb" name="DSC_1237.JPG" href="/Images/House/Projects 2010/Living Room Remodel/DSC_1237.JPG?maxwidth=600&maxheight=600" title="DSC_1237.JPG">
                    <img src="/images/spacer.gif" src2="/Images/House/Projects 2010/Living Room Remodel/DSC_1237.JPG?maxwidth=60&maxheight=60" alt="DSC_1237.JPG" id="image4" />
                </a>
                <div class="caption">
                    <div class="download">
                        <a href="/Images/House/Projects 2010/Living Room Remodel/DSC_1237.JPG" >Download Original</a>
                    </div>
                    <div class="image-title"></div>
                    <div class="image-desc">
                        <br />3/3/2010 10:00:54 PM
                    </div>

                </div>
            </li>

Original comment by todd.m.m...@gmail.com on 17 Jul 2013 at 2:49

GoogleCodeExporter commented 9 years ago 
oh one more thing... the HTML I have pasted above is known to work with the 
jquery.gallerific.js I have linked in post #4

Original comment by todd.m.m...@gmail.com on 17 Jul 2013 at 2:51