Clickable slideshow

Question

Review the link below. I am trying to develop the slideshow in html using straight divs (no tables) call TN3 gallery which is the first slide show gallery on the website. Can someone provide the html code to producing the TN3 Gallery slide show. You can also review the screenshow image.

check this link

http://speckyboy.com/2010/11/14/20-jquery-image-and-multimedia-gallery-plugins/

Attachment: tn3galleryslideshow.zip

Sanjeeb Lenka · Answer

check this attached file

David Smith · Answer

Sanjeeb thanks for the clickable tutorial. I dont know how i skip over the file you attached.

David Smith · Answer

When I try to download the jquery lightbox file nothing is there. It sends me to this blank page. I need help with implementing the clickable slide show. http://leandrovieira.com/download/7/ This is my HTML code below. I want to put the slide show in here and make click left or right to go the next div id or image if that make sense. How would I do that?

Iftikar Hussain · Answer

yes initially the div and content will be not visible to the user but it will be loaded in the browser. So in the increment order I am making it visible after some time. Regarding the lightbox it is simple to implement. You just follow as they have mentioned in the web site. Regards Iftikar

David Smith · Answer

So to interpret that you only use the divs to for layvout purposes or to hold images but you did not wont to display the div itself????? Also I am having trouble downloading the lightbox jquery. I need a easier example to do what I want to do.

Iftikar Hussain · Answer

I have explained . Refer my previous post Regards Iftikar

David Smith · Answer

You havent explain what this the display:none style property. I going to the link now.

Iftikar Hussain · Answer

You can use lightbox plugin. Refer the below link http://leandrovieira.com/projects/jquery/lightbox/ Regards Iftikar

Iftikar Hussain · Answer

display:none means that the particular element will be not visible to the user but will be available in HTML source. Regards Iftikar

David Smith · Answer

This is my HTML code below. I want to put the slide show in here and make click left or right to go the next div id or image if that make sense. How would I do that? In your the HTML code you provided your id are intergers which will work for your javascript loop function()

David Smith · Answer

I found out why it dont work. You put the javascript outside of the element. Its working now. Can you show me how to do the clickable slideshow where I click. Also what is the purpose of the property display: none?

Iftikar Hussain · Answer

where is your js file is located? Please correct the path in the script tag Scripts/jquery-1.9.1.js  type=text/javascript language=javascript> Regards Iftikar

David Smith · Answer

Slide Show .maindata { margin-top: 0; padding-bottom: 0; width: 100%; float: left; background-color: #F1F2F4; } .slides { background-color: #ffffff; height: 345px; } .slide { width: 1010px; height: 335px; float: left; padding: 5px; } .slide img { width: 1010px; height: 335px; } function loop(idx) { $(div# + idx) .fadeIn(2000) .delay(1000) .fadeOut(500 function () { loop((idx + 1) % 6); }); } loop(0);

Iftikar Hussain · Answer

can you put your HTML code? I have attached the js file. Regards Iftikar

David Smith · Answer

HTML not working can you point me to the right js file in the browser at the moment i have the 1.10.2

David Smith · Answer

Ok. I'm going to test all code in 30mins. At the moment I'm doing research on css. Learning what thw various attributes do and mean. Also from the code you presented above can you put comments from next to your javascriot code.

Iftikar Hussain · Answer

Here is the code for normal slide show without clickable Download the juqery file jquery-1.9.1.js from google Slide Show .maindata { margin-top: 0; padding-bottom: 0; width: 100%; float: left; background-color: #F1F2F4; } .slides { background-color: #ffffff; height: 345px; } .slide { width: 1010px; height: 335px; float: left; padding: 5px; } .slide img { width: 1010px; height: 335px; } function loop(idx) { $(div# + idx) .fadeIn(2000) .delay(1000) .fadeOut(500 function () { loop((idx + 1) % 6); }); } loop(0); Regards Iftikar

David Smith · Answer

I mean I can start off with normal slideshow to understand it. But in the end I am trying to pull the slide shiw from the specky boy website I posted earlier. Then once I get the hang of I can produce my own.

Iftikar Hussain · Answer

the requirement is bit like that. If you want just a normal slide show then it will be very simple. Regards Iftikar

David Smith · Answer

Okay. I have my divs in place. I'm going to spend a hour or so to mess around with examples you guys provided

Iftikar Hussain · Answer

Hi Please refer the below link. It is easy implementation http://spaceforaname.com/galleryview/ Regards Iftikar