Yivgeni Posted August 20, 2010 Share Posted August 20, 2010 Hi!I know lightbox is not an html topic, but my question is, I believe, html related. Now, I know how to put the effect in my gallery, and I know how to group them so that when clicking on an image it opens and when clicking on the next button it shows the rest of the image "family". My question is this; how can I program the website in such a way that I will have one image to stand for say, apples, and when activated the viewer will be able to click next and go through 20 images that would not otherwise appear on the website?Example:(I am not trying to advertise, just this is the only way I can explain it)http://yivgeni-art.com/portfolio.html , lets say you click the paintings image, it goes to the gallery and when I click on the first image I can scroll through all of them without exiting the lightbox. Now, is there a way to enter the lightbox as soon as I click the paintings image without going to the gallery at all? Question 2;http://www.thedrakehotel.ca/ This website has a cool bit of white text at the bottom of the large image that fades and new text appears. It seems very simple, but me being a little dense html-ly I can't understand how to make it. The source of the site has this code for the text: <li style="display: list-item;"><span class="quote">"Big exuberant flavours are [Chef] Rose's signature... [Drake’s] kitchen is right on the mark..."</span> - <span class="source">Joanne Kates, The Globe and Mail</span></li> So, how would one reproduce such an effect? Thanks in advance! Link to comment Share on other sites More sharing options...
music_lp90 Posted August 20, 2010 Share Posted August 20, 2010 I know how to group them so that when clicking on an image it opens and when clicking on the next button it shows the rest of the image "family".I think you should be able to do it the same way, but in each of the images that you don't want seen initially, just put style="display:none;". You could also do it in an external style sheet. .hiddenImg { display:none; }and give each image the class="hiddenImg". That would be the preferred way. Link to comment Share on other sites More sharing options...
music_lp90 Posted August 20, 2010 Share Posted August 20, 2010 By the way, the thumbnail images that aren't shown could just be a small gif used for each image, to prevent waiting for them to load. Only the <a href=""> will need the source of the images you want seen after clicking the first image that opens up lightbox. Link to comment Share on other sites More sharing options...
Yivgeni Posted August 21, 2010 Author Share Posted August 21, 2010 Thank you, this helps! I will try it out now. Any idea about the text from the other website that I have linked? Link to comment Share on other sites More sharing options...
Howdy_McGee Posted August 23, 2010 Share Posted August 23, 2010 Thank you, this helps! I will try it out now. Any idea about the text from the other website that I have linked? http://www.btinternet.com/~st_rise/main/mainfram.htmThis is what your looking for. Of course you'll have to edit it to your liking but it's still the same. BTW This is a great website to find all the scripts you need ^.^ Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.