I’m using a repeater to display thumbnail images. When someone clicks a thumbnail I want to show a larger version of that photo on a separate page. I’m loading the selected image into a global variable, then when I display the new page, I set the larger image widget to the global variable value. I know the global variable has the correct file name, but the larger version isn’t displaying. Anyone know what I’m doing wrong?
Thanks!
Click thumbnail image in repeater on one page, then show larger version on separate page
MarcS
#1
Hi MarcS!
Hmm, are you having the image widget on your separate page set to the value of your global variable, and the global variable is set to either your local file name or local file path? In this case, it would be expected that the image widget would not show the file tied to the global variable when the project is previewed. Using the image name as the global variable (“image.png”, for example), will not pull the image’s content to load into the image widget on its own. Using the image’s path as a global variable would only make the image visible when the project is locally generated, as web browsers prevent websites from accessing a computer’s local file system. You can learn more about how local files can be used in Axure RP projects here.
If you would like your repeater to dynamically choose an image to display on a separate page, and you would like the image on the other page to display when previewed or published to Axure Share, you could either set up references pages as described in our repeater tutorials, or you could use a global variable and some conditional logic.
Instead of having the image set to equal the value of the global variable, you would want to set up a series of conditional logic cases where, when the global variable equals “A”, the image sets to a different, chosen image (image “A.png”, for example). When the global variable equals “B”, the image widget sets to image “B.png”, etc. This image will need to be selected directly on the page that is being loaded. Please see the attached file for an example of this.
Repeater-image-sample.rp (61.3 KB)
I hope this helps!
MarcS
#3
Sorry, but I’m confused by your response. I have imported the images into the repeater on the home page and am showing them as thumbnails. When someone selects one of these thumbnails, I want to display the same image–just a larger version of it–on a separate page. I don’t want to have to import images on this second page.
I got around this issue for now by displaying the larger version on the same page as the repeater–just wanted to know if I could display it on a second page.
Hi MarcS,
Apologies about the confusion! If you would like to display the images on the second page, they would need to be imported o to the second page to be visible in a web browser when previewing or publishing the project. The only time when the images would be visible on the second page without needing to import the image onto the second page would be when using the file path’s value and generating the page locally, as described in the above message.
One other way to show the image on your second page would be to duplicate the repeater onto the second page. In this way, the image files would be imported within the copied repeater, so you would not need to manually import the images again. You could use a global variable to determine which repeater image is visible on the page using conditional logic and repeater filters as the page loads. You could then modify the size of the image widget in this second page’s repeater, so that the image displays at a larger size.
Repeater-image-sample_filtered.rp (64.0 KB)
MarcS
#5
Thanks, Chelsea–this is helpful. BTW, I’ve had version 8 crash a number of times when I’m importing the photos (I’m answering “yes” to the optimize question). It may be related to the number of photos–I have trouble after importing about 25 images, each between around 2 and 3.5 MB).
Axure 8 crashes when importing many 2-3.5 MB photos
Hi MarcS!
Thanks for letting me know about this! Because this issue falls outside of the scope of this topic, please create a new forum topic to address this issue. You can do this by clicking “New Topic” found on the forum’s home page, or by clicking the link icon found in one of this topic’s replies, and then clicking the “New Topic” button.
Link icon:
“New topic” button:
This will create a new topic that includes a link to this post. This can be useful in cases where the same file is being discussed, but different issues are being addressed. Please feel free to try this feature out when creating your new topic. For tips on how to write this next forum topic, please take a look at our Forum Guidelines.
Thank you!