# trying to built a website that display pictures in a rotating cylinder



## Tom Crowe (May 25, 2015)

I'm new to this web designing, but have been studying php, jscript, c++ & html. What I'm trying accomplish is having a 3d viewable cylinder of pictures (like pinterest pages) but be able to post pictures on it an scroll around it to see them.


----------



## wmorri (May 29, 2008)

Hi welcome to TSF,

Can you post a couple of examples similar to what you want to make. Then I can start to point you in the right direction.


----------



## Tom Crowe (May 25, 2015)

He is the link for what sparked my idea: https://desandro.github.io/3dtransforms/docs/carousel.html

I want to do the carousel, but stack amother carousel on top as more pictures are added to it. Eventually there will be a multitude of these, going vertically. The user can spin t I watch them. It may sound crazy.


----------



## DDAoN (Mar 19, 2011)

Welcome to TSF, Tom Crowe!

It sounds to me like you have the design part down, what you need is help with the programming (developing). The are two VERY different areas of expertise. 

Your example is actually one of the most simplistic representations of what you're looking to do, but it is a great place to start IF you have no interest in backwards compatibility, or want highly complex code to provide backward compatibility while providing the up-to-date users with up-to-date functionality.

In English now. ^^'

The example you provided is utilizing CSS3 and CSS3-oriented JavaScript. Though most modern browsers will support this code, including mobile, it will break if you go back a few versions. If reverse compatibility is a concern, you'd really want to take a step back and decide how much time you want to dedicate to making this work and how complex you want it to be.

So, onto the specifics of what you're asking for. If you want to only use modern technologies, you're looking at AJAX (JavaScript), server-side scripting (PHP, ASP, etc.), potentially databasing (MySQL, MS Access, etc.), CSS3, and HTML5 (depending on your route). Using modern technologies gives you two approaches:
Use HTML5 canvas
Using the 'canvas' element means you will be conducting EVERYTHING via JavaScript and don't have to touch a stylesheet file (notice I didn't say CSS). Instead, you'd apply whatever CSS3 manipulations needed via the JavaScript (yes, you could still make this a separate file, but all application of the styles will be via the JavaScript).

Don't use HTML5 canvas
The JavaScript will primarily serve for user action and AJAX execution, but will apply any stylesheet manipulations needed as the user acts.

If, on the other hand, you want to use older technologies, go Flash. It'll be the easiest. You'll still need server-side scripting and (depending on how to do it) databasing, but Flash of the plus of working with older browsers (no default mobile browser supports Flash).

Lastly is a bit of a middle ground. Despite the fact that older browsers can't use CSS3 and mobile browsers don't support Flash, you can use CSS2 (more commonly just called CSS) and "old school" JavaScript to get the same/similar results. The code would have to be significantly more complex, but it is doable.

A second option for the middle ground is to do bother a Flash and CSS3 version. Everyone's happy except the guy that has to update the system, right? 

Regardless of how you want to pursue this, I highly recommend brushing up on HTML5 canvas, CSS3, and the JavaScript manipulations you can use to make them "pretty" looking. I guarantee that there are thousands of tutorials on the web for this sort of project. Without a better idea of your knowledge of dynamic content manipulation from the client-side with server-side updating, I can't really recommend any, but I suggest starting small. Use the tutorial you linked and see if you can get it to do what you want with the one. Once you have that working, look into setting up conditions to break it up into 2, 3, ... rows instead of one big one.

I hope this helps (and made sense ^^')!


----------



## Tom Crowe (May 25, 2015)

Wow! Thank you so much for the advice...aND as little as I do know i didn't let anything slip by that you mentioned. One last question...I have been go ogling the hell out of terms. Ajax and jscript...similar, close, different language?


----------



## DDAoN (Mar 19, 2011)

AJAX is technically not a new language. It is a newer styling to integrating JavaScript and XML. Used properly, it is great for performing highly dynamic and complex operations that would normally have to be done across multiple page loads within a single page load.

A really basic example would be logging into a website. Now, this can be accomplished with 2 page loads, in a traditional style. The first load would be for the login prompt while the second would be dependent upon the server-side verification of credentials (prompt if failed or content if success).

Using AJAX, you can have the credentials submit to the server without the browser even having to reload the page. Instead, it loads the content needed, nothing more. A single page load with access to whatever content is needed.

In truth, this method of AJAX implementation has become little more than a directory structure mask combined with prettifying the page transitions (you can easily throw up a "loading" overlay while the name page data is loaded) that previously would've required the use of Flash.

AJAX, however, can be used for far more difficult feats, such as cross-domain scripting (blocked by all major browsers by default as a security risk). When user thinks of JavaScript, they think of dynamic content. A programmer thinks of what can be done on the users browser. When a user thinks of AJAX, they think, "That big guy from Mortal Kombat?" A programmer thinks of what can be done between a users browser and the server to keep the users experience clean and dynamic with server-controlled content.

AJAX is in no way a programming language, or any type of language, it is simply a style that, well, revolutionized the implementation of JavaScript in ways never accomplished before.


----------



## Masterchiefxx17 (Feb 27, 2010)

Something like this perhaps:

Dynamic Drive DHTML Scripts- Carousel Slideshow


----------



## brent.charlebois (May 8, 2007)

Hear are the goods...

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thumbnail Navigator Skin 01 - Jssor Slider, Carousel, Slideshow with Javascript Source Code</title>
</head>
<body style="padding: 0; margin: 0; font-family:Arial, Verdana; background:#000;">
    <!-- use jssor.slider.min.js instead for release -->
    <!-- jssor.slider.min.js = (jssor.js + jssor.slider.js) -->
    <!--<script type="text/javascript" src="../js/jssor.js"></script> -->
    <script type="text/javascript" src="jssor.slider.min.js"></script>
    <script>
        init_jssor_slider1 = function (containerId) {
            var options = {
                $AutoPlay: false,                                   //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
                $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500

                $ThumbnailNavigatorOptions: {                       //[Optional] Options to specify and enable thumbnail navigator or not
                    $Class: $JssorThumbnailNavigator$,              //[Required] Class to create thumbnail navigator instance
                    $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always

                    $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                    $SpacingX: 8,                                   //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                    $DisplayPieces: 10,                             //[Optional] Number of pieces to display, default value is 1
                    $ParkingPosition: 360                           //[Optional] The offset position to park thumbnail
                }
            };

            var jssor_slider1 = new $JssorSlider$(containerId, options);
        };
    </script>
    <!--#region Jssor Slider Begin -->
    <!-- To move inline styles to css file/block, please specify a class name for each element. -->
    <div id="slider1_container" style="position: absolute; top: 0px; left: 20%; width: 770px;
        height: 670px; background-color: #000; overflow: hidden;">

        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000; top: 0px; left: 0px; width: 100%; height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat 50% 50%;
                top: 0px; left: 0px;width: 100%; height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div u="slides" style="cursor: move; position: absolute; left: 0%; top: 70px; width: 570px; height: 526px; overflow: hidden;">
            <div>
                <img u="image" src="img/paint/01.jpg" />
                <img u="thumb" src="img/paint/01.jpg" />
            </div>
            <div>
                <img u="image" src="img/paint/02.jpg" />
                <img u="thumb" src="img/paint/02.jpg" />
            </div>
            <div>
                <img u="image" src="img/paint/03.jpg" />
                <img u="thumb" src="img/paint/03.jpg" />
            </div>
            <div>
                <img u="image" src="img/paint/04.jpg" />
                <img u="thumb" src="img/paint/04.jpg" />
            </div>
            <div>
                <img u="image" src="img/paint/05.jpg" />
                <img u="thumb" src="img/paint/05.jpg" />
            </div>
            <div>
                <img u="image" src="img/paint/06.jpg" />
                <img u="thumb" src="img/paint/06.jpg" />
            </div>
            <div>
                <img u="image" src="img/paint/07.jpg" />
                <img u="thumb" src="img/paint/07.jpg" />
            </div>
            <div>
                <img u="image" src="img/paint/08.jpg" />
                <img u="thumb" src="img/paint/08.jpg" />
            </div>
            <div>
                <img u="image" src="img/paint/09.jpg" />
                <img u="thumb" src="img/paint/09.jpg" />
            </div>
            <div>
                <img u="image" src="img/paint/10.jpg" />
                <img u="thumb" src="img/paint/10.jpg" />
            </div>
            
            <div>
                <img u="image" src="img/paint/11.jpg" />
                <img u="thumb" src="img/paint/11.jpg" />
            </div>
            
        </div>
        
		
		
        <!--#region Thumbnail Navigator Skin Begin -->
        <!-- Help: [url=http://www.jssor.com/development/slider-with-thumbnail-navigator-jquery.html]Slider with Thumbnail Navigator (jQuery Code) - Jssor Slider Development Kit for web developer, web development, website developer, website development, website design, web design, website, web page[/url] -->
        <style>
            /* jssor slider thumbnail navigator skin 01 css */
            /*
            .jssort01 .p            (normal)
            .jssort01 .p:hover      (normal mouseover)
            .jssort01 .p.pav        (active)
            .jssort01 .p.pdn        (mousedown)
            */

            .jssort01 {
                position: absolute;
                /* size of thumbnail navigator container */
                width: 800px;
                height: 100px;
            }

                .jssort01 .p {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 72px;
                    height: 72px;
                }

                .jssort01 .t {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border: none;
                }

                .jssort01 .w {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 100%;
                    height: 100%;
                }

                .jssort01 .c {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    width: 68px;
                    height: 68px;
                    border: #000 2px solid;
                    box-sizing: content-box;
                    background: url(../img/t01.png) -800px -800px no-repeat;
                    _background: none;
                }

                .jssort01 .pav .c {
                    top: 2px;
                    _top: 0px;
                    left: 2px;
                    _left: 0px;
                    width: 68px;
                    height: 68px;
                    border: #000 0px solid;
                    _border: #fff 2px solid;
                    background-position: 50% 50%;
                }

                .jssort01 .p:hover .c {
                    top: 0px;
                    left: 0px;
                    width: 70px;
                    height: 70px;
                    border: #fff 1px solid;
                    background-position: 50% 50%;
                }

                .jssort01 .p.pdn .c {
                    background-position: 50% 50%;
                    width: 68px;
                    height: 68px;
                    border: #000 2px solid;
                }

                * html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c {
                    /* ie quirks mode adjust */
                    width /**/: 72px;
                    height /**/: 72px;
                }
        </style>
		
		
        <!-- thumbnail navigator container -->
        <div u="thumbnavigator" class="jssort01" style="position:absolute; left: -30%; top:500px; bottom: 0px; background-color:#000">
            <!-- Thumbnail Item Skin Begin -->
            <div u="slides" style="cursor: default;">
                <div u="prototype" class="p">
                    <div class=w><div u="thumbnailtemplate" class="t"></div></div>
                    <div class=c></div>
                </div>
            </div>
            <!-- Thumbnail Item Skin End -->
        </div>
        <!--#endregion Thumbnail Navigator Skin End -->
        <a style="display: none; color:000 " href="http://www.jssor.com">slider in html</a>
        <!-- Trigger -->
        <script>
            init_jssor_slider1("slider1_container");
        </script>
    </div>
    <!--#endregion Jssor Slider End -->
</body>
</html>
```
OK first, you have to download the jscript from jssor.com/download

Then you have to fill in the names of the images you want to display.

If you want more info please post...


----------



## Tom Crowe (May 25, 2015)

How would I set it up to accept user defined images, like if I were to allow another user on the site (by loggING in) and adding their own pictures to the carousel. Does this make any sense? I guess I have it all pictured in my mind and I'm just trying to hash out the details. Thanks so much for the help.


----------



## brent.charlebois (May 8, 2007)

Please explain further what you you want...


----------



## Tom Crowe (May 25, 2015)

So the carossel is would be unique for each user that logs in, like how face book is one is a single website but each persons in unique


----------



## brent.charlebois (May 8, 2007)

You have a big task ahead of you. But it's the way learn!

You can do all that you want for your project with PHP. Go to W3Schools Online Web Tutorials and on the opening page do a search for 'uploading files'. It will show you how to upload images. My advise is to create a database table for each of your clients. Then save your clients' user id's in it and all of his/her images in the table.

As far as your clients logging in, again you can do it with PHP. But I'm not getting into that right now.

Let me know how you do. :smile:


----------



## Tom Crowe (May 25, 2015)

That was a perfect answer. Thanks


----------



## Tom Crowe (May 25, 2015)

So now that I have defined the base for the website as PHP. Are there adaptive languages that can be used in conjunction with PHP to help create the site or should it all be created with PHP and PHP extensions. I know that some people are partial a certain style or language; I however am very open minded but determined to achieve what I have designed.

In the "hub" portion of my design a user can have their picture networked to other users (based on their mutual acceptance) and then in that page on the user posted image another user can use a popup floating tool bar (a simplified (draw, select, cut, paste, etc.) on the image. 

I know this seems complicated but I am very determined, and will figure it out. I was thinking this portion of the site may need the implementation of C++ but I don't want to slow down the internal workings by deviating from PHP. Im still fairly new to this and I have always had a drive or passion for whatever I have done. 

If I need to add more clarification, please be frank. So far I have taken pages of notes and rewritten code for different sections based on the answers I have gotten.


----------



## brent.charlebois (May 8, 2007)

If you want my help , First, you have to have a Webhost to host you're site. I suggest Hosting 24. You have to pay for it but It's worth it.


----------



## brent.charlebois (May 8, 2007)

Update...create an mySql table for each of your users. You then assign a password for each...that's for starters...


----------



## Tom Crowe (May 25, 2015)

Brent, I do have a domain and it's hosted. I just haven't finalized anything to post. Even got backed up on my under construction page, I've reformatted that page several times and yet it never has the initial appeal. Lol must be my OCD coming out. (BTW :caretme.com)


----------



## brent.charlebois (May 8, 2007)

C++ is a programming language. You don't use it for web development. To do your site you will use PHP along of course with HTML and CSS. At this time I don't think you'll need javascript which is more like C++.


----------



## brent.charlebois (May 8, 2007)

I was wrong with one statement. You will be using Javascript (JQuery) which is used in the carousel code I gave you above.


----------



## Tom Crowe (May 25, 2015)

That's what I was assuming Brent. I have been organizing alot of notes aND designs. Plus working on a quick (or not so quick under construction page...lol if I werent my worst enemy, It would ip already ).


----------



## Tom Crowe (May 25, 2015)

So another question, I'm laying out the carousel and now I want to allow a user to pop up a picture from the carousel and make notes in it using a simplistic photoshop panel. Basically drawing their comments on it. I assume that this would be ajax? I found a sample of how someone else did a similar idea but I wasn't sure.

http://tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/


----------



## Tom Crowe (May 25, 2015)

Web hosting...I keep on getting asked wether I need windows or linux. If plan to build the website in php could I use either Webhosting packages? I'm operating on windows 8....just a bit confused


----------



## brent.charlebois (May 8, 2007)

Since you are running Windows 8 then you would specify Windows. But you could, as far as I know, specify linux if you are running that.

That's an interesting site you linked to above - about doing Stickys. You would do good to study that page and maybe get some ideas from it to apply to your case.


----------



## wmorri (May 29, 2008)

Umm it really doesn't matter. I am going to assume (without going back and reading) that you are using shared hosting. A plan that comes with Apache, PHP, MySQL, and some other software. A plan where you get access to a CPanel, FTP, and maybe get ssh information if you know how to ssh into your server. You can really get either at your level of hosting, it really only starts to matter when you start to get into more advanced hosting. If you are going to get into a VPS (virtual private server) or a Dedicated Server. That is when you need to start to think about Windows or Linux. 

If you want to use Windows based hosting that is perfectly fine. You won't have access to a desktop though, like I mentioned above you will do most if not all of your work from a Control Panel, probably CPanel. Just like if you go with Linux hosting you won't be given a desktop or a command line to start with. You will also have a Control Panel. You can gain ssh access from your CPanel, but you don't have to use it.


----------



## Tom Crowe (May 25, 2015)

Update...I have uploaded the login and registration pages. It took me a bit, but I accomplished it. Now I have been working on the carousel part. This is where I'm stuck, after building the carousel script (or tweeking it) I have all the file and folder structure set for it. I can figure out that I need to create IDs for the folder that holds the carousel routine...and any further carousels need IDs also. But where dining start with building a script to call each of these script folders into play, so that I can get 4 of these one screen. Maybe I'm way ahead of myself..not sure but let me know either way. Thanks


----------



## brent.charlebois (May 8, 2007)

How are you doing?

Check out the following site.

http://hallofhavoc.com/2013/05/how-to-create-an-overlay-popup-box-using-html-css-and-jquery/

Click on download... a little down the page.
You will have to unzip it. Specify the folder you want the unzipped to go, like Documents. 

It fetches the required jQuery for you. Then simply execute index.html. 

Then you can click on where it says and a text popup will appear, on a new page. I have searched and cannot fine a popup on the same page as you click on your images. The text in the popups has to be entered in the index.html file. This is a matter you have to consider regarding your users. You will have to do the updates in the index.html file, not your users, unless you allow them to.

Hope this helps? Let me know.


----------



## brent.charlebois (May 8, 2007)

I haven't heard from you.

Do you want a carousel as a cylinder or what? If you do what kind? If you want one that displays enlarged images when you click on an image then that could be a problem.

There is no way that I know how to click on an image and enter text on that image. As I said above you will have to do it with HTML. This you will have to do in real time. 

I have code to do captions below images. This is not a carousel, but will display one image at a time with the captions.

Another idea is to use mySql database and SELECT from the database the text that corresponds to the image that you click on.

However, you have to set up the database to do what we want.


----------



## Tom Crowe (May 25, 2015)

So far I've been successful with my website. My next question is I found a Joomla based pixel editor that has a layers panel on it. I want to modify the Layers panel to reflect other user inputs. So if I post a picture on my website and other people see it they can go into the pixel editor and write comments all over it however I want each user to be isolated to a layer.


----------



## brent.charlebois (May 8, 2007)

Can't help you there.


----------



## wmorri (May 29, 2008)

Can you post a link to this editor that you found?


----------

