What steps will reproduce the problem?
1. JSON jquery call
2.
3.
What is the expected output? What do you see instead?
A functioning slideshow but instead only thumbnails load.
What version of the product are you using? On what operating system?
Galleriffic 2.0; jquery 1.6.1
Please provide any additional information below.
Greetings,
I am trying to pull images from flickr to a galleriffic gallery. The images are
retrieved and are visible through "Resources" under developer tools but the
undefined resource - still not sure what this is - will further produce,
"uncaught typeError: Cannot read property 'index' of undefined."
I've substituted images on local server and galleriffic works fine - it's only
the images from flickr that causes this issue.
Here is the coding:
HTML
<div id="mediaphotos">
<div id="thumbs" class="pnavigation">
<a class="pageLink prev" href="#" title="PreviousPage"></a>
<ul class="thumbs" id="pinsert">
</ul>
<a class="pageLink next" href="#" title="NextPage"></a>
</div>
</div>
<div class="pcontent">
<div class="slideshow-container">
<div id="controls" class="controls"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="/js/jquery.opacityrollover.js"></script>
SCRIPT
<script type="text/javascript">
$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhoto
s&api_key=XXXXXXXXXXXX&photoset_id=XXXXXXX&per_page=5&page=1&format=json&jsoncal
lback=?", function(data) {
$.each(data.photoset.photo, function(i,item) {
var photoURL = 'http://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_t.jpg';
var fullURL = 'http://farm' + item.farm + '.staticflickr.com/' + item.server + '/' + item.id + '_' + item.secret + '.jpg';
$("<img/>").attr("src",photoURL).appendTo("#pinsert").wrap("<li/>").wrap("<a class='thumb' href='" + fullURL + "'></a>");
});
});
</script>
and the rest is from the example @ GALLERIFFIC
<script type="text/javascript">
jQuery(document).ready(function($) {
$('div.pcontent').css('display', 'block');
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li, div.pnavigation a.pageLink').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
var gallery = $('#thumbs').galleriffic({
delay: 2500,
numThumbs: 7,
preloadAhead: 7,
enableTopPager: false,
enableBottomPager: false,
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',
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);
// Update the photo index display
this.$captionContainer.find('div.photo-index')
.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
// Show appropriate next / prev page links
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');
this.fadeTo('fast', 1.0);
}
});
/**************** Event handlers for custom next / prev page links **********************/
gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
});
</script>
Thank you for your assistance!
Original issue reported on code.google.com by aay...@gmail.com on 5 Dec 2011 at 8:40
Original issue reported on code.google.com by
aay...@gmail.comon 5 Dec 2011 at 8:40