Viewing image gallery - opening from hyperlink
image gallery - opening from hyperlink
|
User: darrendixie123456789 12 years ago
|
|
|
Is it possible to open an image gallery from a hyperlink? I would like to make an image gallery that only displayed/opened when an object or text was linked to it. Hope that makes sense. So... rather than displaying the whole gallery on the page all of the time, I want to display some text/image that will open/start the gallery when clicked. Can I do this or would it be easy to develop? Please see link here to a website: http://www.bose.co.uk/GB/en/home-and-pe ... er-system/ In this example the graphic 'Photos' opens an image gallery. Can EasyWeb do something like this? |
|
|
User: Roddy 12 years ago
|
|
|
You can use a lightbox style gallery for this. The one I favor is Shadowbox... http://www.ezmacwebdesign.com/Demo/shadowbox/shadowbox.html The HTML is a list of links to the images and the thumbnails. To get the effect you want it's just a question of omitting all the links to the thumbs apart from the first one. You could also replace this with a text link. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: darrendixie123456789 12 years ago
|
|
|
Thanks Roddy. I will give this ago. I should have started with a smaller site, then I would have been finished by now! |
|
|
User: Roddy 12 years ago
|
|
|
Are you using this feature to display products - or what?
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Guest 12 years ago
|
|
|
I'm having the same issue as darrendixie123456789. The EasyWeb image gallery seems too messy for what I want. I'd like to be able to click on a photo and that would open up a slide show style image gallery that can be manual clicked through. I downloaded the shadowbox base version as you suggested. Do I then insert this into the EasyWeb with the hyperlink widget? And can you be more specific about what I need to omit? Thanks! |
|
| Edit | |
|
User: Paul-RAGESW 12 years ago
|
|
|
Quote: I'd like to be able to click on a photo and that would open up a slide show style image gallery that can be manual clicked through This is exactly how EasyWeb's image gallery works. It works very similar to shadowbox. ------------------------------- Paul EverWeb Developer |
|
|
User: Guest 12 years ago
|
|
|
Ok. But I'd like to not see the thumbnails of the other images. I'd like the first image to essentially be an album cover. You would need to click on it to see the rest of the images in the gallery. Alternatively, I guess I could hyperlink the title image to another page within the website. But in that case I'd still like to hide the other page from view, so that it is only accessible via the album cover image. |
|
| Edit | |
|
User: Roddy 12 years ago
|
|
|
Drag the shadow box files, images and the thumbnail into assets. Paste the link to the CSS file into the page Head Code box... <link rel="stylesheet" type="text/css" href="{!-ASSETSPATH-!}External%20Files/shadowbox.css">Paste this into the page Footer Code box... <script type="text/javascript" src="{!-ASSETSPATH-!}External%20Files/shadowbox.js"></script>Paste this code into an HTML Snippet... [code:t8g1idg1]<div id="slider"> <a href="{!-ASSETSPATH-!}Images/1.jpg" rel="shadowbox[gallery]" title=""><img class="thumb" src="{!-ASSETSPATH-!}Images/thumb.jpg" alt="Alt Text"></a> <a href="{!-ASSETSPATH-!}Images/2.jpg" rel="shadowbox[gallery]" title=""></a> <a href="{!-ASSETSPATH-!}Images/3.jpg" rel="shadowbox[gallery]" title=""></a> <!-- add more images as necessary --> </div>[/code:t8g1idg1] Note how the first anchor tag has the href of the image and the src to the thumbnail. The rest of the anchors have just the href of the image. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: darrendixie123456789 12 years ago
|
|
|
Hi Roddy, Yes I am indeed displaying product images. I have a main image then lots of different angles, product in situ photos. I have tried this with EW image gallery and tweaked it as much as possible to make it work on the page displaying every photo is just way to OTT. Lots of great ideas thank you. I will give Shadowbox a go when I have a bit more time (hopefully tomorrow) following your instructions. Admin - perhaps this can looked into? Making a title/cover picture option for the image gallery for future developments? |
|
|
User: Guest 12 years ago
|
|
|
Hi Roddy, I am using Shadowbox as you have described above and everything works fine except the slideshow does not automatically start playing images, I can move to the next image by using keyboard arrows. I have had a look at the options on the Shadowbox site but none seem to relate to autoplay. Can you give me hand please. Here is the footer code: <script type="text/javascript" src="{!-ASSETSPATH-!}External%20Files/shadowbox.js"></script> <script type="text/javascript"> Shadowbox.init({ handleOversize: "resize", modal: false, overlayOpacity: 0.8, fadeDuration: 0.35, displayNav: true, slideshowDelay: 0, continuous: true }); Thanks Cam |
|
| Edit | |
|
User: Roddy 12 years ago
|
|
|
In the javascript, set the slideshowDelay to 1 or more. This is the delay in seconds before it moves on to the next slide.
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Guest 12 years ago
|
|
|
Thanks Roddy, that works well. New problem - i have added a second slideshow and adjusted the html widget to the new images however both slide shows are now showing all images from both slideshows, would you mind telling me how to fix this http://the-collective.com.au slideshows are under 'Property Photography' and ' Virtual Furniture' |
|
| Edit | |
|
User: Roddy 12 years ago
|
|
|
You need to define different galleries - otherwise all the slides open in the same one. You can do this in the HTML by defining the relationship of the anchors. Give each gallery a unique ID and add this ID to the "rel" attribute in each anchor. Here's examples using your images. I have only used 3 in each to save space! Gallery [1] has an id of "gallery-1" and has this in the rel attribute of each anchor - rel="shadowbox[gallery-1]" [code:1nc9gn15]<div id="gallery-1"> <a href="http://www.the-collective.com.au/home01_images/001.jpg" rel="shadowbox[gallery-1]" title=""><img class="thumb" src="http://www.the-collective.com.au/home01_images/mobile/001.jpg" alt="Alt Text"></a> <a href="http://www.the-collective.com.au/home01_images/002.jpg" rel="shadowbox[gallery-1]" title=""></a> <a href="http://www.the-collective.com.au/home01_images/003.jpg" rel="shadowbox[gallery-1]" title=""></a> <!-- add more images as necessary --> </div>[/code:1nc9gn15] Gallery [2]] has an id of "gallery-2" and has this in the rel attribute of each anchor - rel="shadowbox[gallery-2]" [code:1nc9gn15]<div id="gallery-2"> <a class="gallery-2" href="http://www.the-collective.com.au/vf/vf_001.jpg" rel="shadowbox[gallery-2]" title=""><img class="thumb" src="http://www.the-collective.com.au/vf/thumb.jpg" alt="Alt Text"></a> <a class="gallery-2" href="http://www.the-collective.com.au/vf/vf_002.jpg" rel="shadowbox[gallery-2]" title=""></a> <a class="gallery-2" href="http://www.the-collective.com.au/vf/vf_003.jpg" rel="shadowbox[gallery-2]" title=""></a> <!-- add more images as necessary --> </div> [/code:1nc9gn15] You can add a descriptive title to each slide using the "title" attribute in each anchor if you want. It appears at the top left of the image. You should also add descriptive text in the alt attribute - alt="Alt Text Goes Here" - for SEO. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Julian Bromley 12 years ago
|
|
|
Thanks for the Shadowbox Code, that works great when I click on the picture to start the slideshow. Is it possible to have the slideshow run automatically when the page is opened so the image doesn't have to be clicked on? Thanks |
|
|
User: Roddy 12 years ago
|
|
|
A standard slideshow in autoplay mode would probably be better. This is tiny cycle slider which is very lightweight and basic... http://www.ezmacwebdesign.com/Demo/Cycle-Slider-Master/tcycle/index.html If you want more features you can use the full blown version to have pause on mouse over, captions, hyperlinks etc... http://www.ezmacwebdesign.com/Demo/Cycle-Slider-Master/cycle-2/fade.html http://www.ezmacwebdesign.com/Demo/Cycle-Slider-Master/cycle-2/cap-anchor.html This is another lightweight query based slider where you can have image, text or text and image... http://www.ezmacwebdesign.com/Demo/styled-banner/styled-banner.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |