Showing images (like a gallery)

Solar2D General Questions/Discussion
#1

Hi everyone!

I am looking for a way to display a set of images as a showcase. Let me explain.

Given a set of images, I want to display one of them, and with a timer, dissolve the image into another one… let’s say similarly to a slideshow (à la iPhoto), but without the fullscreen display.

I’ve tried the following (I am using the Director library):

 showCase = display.newImage(contents.levelThumbs[#contents.levelThumbs])  
 showCase.x = 600  
 showCase.y = 300  
 theScreen:insert(showCase) -- Director class  
 rotTimer = timer.performWithDelay(2000, rotateImages, 0)

and the function is this:

local rotateImages = function()  
 print("rotate!")  
 local pastCase = showCase  
 showCase = display.newImage(contents.levelThumbs[#contents.levelThumbs])  
 showCase.x = 600  
 showCase.y = 300  
 transition.dissolve(pastCase, showCase, 500, 0)  
end

But it doesn’t work. I never succeeded in using transitions, so I am obviously doing something wrong.

Can somebody help me?

Thanks & Cheers! [import]uid: 94362 topic_id: 22913 reply_id: 322913[/import]

#2

shouldn’t you increment the image in rortateimages

 display.newImage(contents.levelThumbs[#contents.levelThumbs+1])

or something like that.

looks like you are dissolving the same image on top of each other so it doesn’t look like you are rotating.

c
[import]uid: 24 topic_id: 22913 reply_id: 91546[/import]

#3

Thanks Carlos, I really missed that: I saw what I ment, but not what it was! :slight_smile:

Anyway, it doesn’t dissolve into the next image, but it seems that the old image disappears for a millisecond, and then the next image appears as I intended.

Why is that? I know it’s something in the transition that I don’t understand… [import]uid: 94362 topic_id: 22913 reply_id: 91671[/import]

#4

So… is it so naive what I am missing? :smiley: [import]uid: 94362 topic_id: 22913 reply_id: 91951[/import]

#5

when doing this

 local pastCase = showCase  
 showCase = display.newImage(contents.levelThumbs[#contents.levelThumbs])

pastCase does hold the reference to showCase. But then you overwrite showCase and also the reference with your new image, which means your var pastCase also holds now your new image, and the reference to your old image is lost. [import]uid: 102950 topic_id: 22913 reply_id: 91954[/import]

#6

I understand. However, just saying what it wrong, doesn’t suggest me how to improve… I far away from being an expert! :slight_smile:

I’ve tried this:

-- Rotation images  
local showCase  
  
-- This does not work as I wanted  
local rotateImages = function()  
 --local pastCase = showCase  
 if rotIdx == #contents.levelThumbs then  
 rotIdx = 1  
 else  
 rotIdx = rotIdx + 1  
 end  
 print("rotIdx " .. rotIdx)  
  
 local newCase = display.newImage(contents.levelThumbs[rotIdx])  
 newCase.x = 600  
 newCase.y = 300  
 transition.dissolve(showCase, newCase, 1000, 0)  
 --showCase:removeSelf()  
 --showCase = newCase  
end

So now I’m not overwriting anything. However, in my simulator the image disappears immediately and the next one fades in.

Is what I’m trying to do that difficult? I really don’t understand what I am doing wrong…

Thanks & Cheers! [import]uid: 94362 topic_id: 22913 reply_id: 92741[/import]

#7

try this:

[code]
contents = {}
contents.levelThumbs = {“1.png”,“2.png”,“3.png”,“4.png”}

local rotateImages = function()
print(“rotate!”)

rotIdx = rotIdx + 1
if rotIdx > #contents.levelThumbs then rotIdx = 1 end

local newCase = display.newImage(contents.levelThumbs[rotIdx])
newCase.x = showCase.x
newCase.y = showCase.y
newCase.alpha = 0
transition.dissolve(showCase, newCase, 1500, 0)

local swap_image = function()
print(“remove”)
display.remove(showCase)
showCase = newCase
end
timer.performWithDelay(1800,swap_image)
end

rotIdx = 1
showCase = display.newImage(contents.levelThumbs[rotIdx])
showCase.x = 300
showCase.y = 300
rotTimer = timer.performWithDelay(2000, rotateImages, 0)
[/code] [import]uid: 102950 topic_id: 22913 reply_id: 92752[/import]

#8

That’s awesome! Thank you! [import]uid: 94362 topic_id: 22913 reply_id: 92756[/import]

#9

Hi milicchio, just wondering if you got this fully functioning. If so,you mind sharing your template? I’ve been looking for something like this for quite awhile already… it’ll be great if you can help. Thanks [import]uid: 123095 topic_id: 22913 reply_id: 100717[/import]