I’m building a yacht website where at the yacht page it shows the yacht’s image along with more photos that are displayed ontop the main image when clicked.

Also it has tabs so the user can see some virtual tours of the yacht without leaving the page (It’s like a second image gallery).

My problem is when I use jQuery tabs the second tab which has the second gallery (virtual tour) doesn’t show the images and the scroller doesn’t work. Looking the code I saw it has to do with jQuery .hide function ($ j(“.tab_content”).hide();) but if I comment it out it show all the tabs.

Here’s the jQuery code:

<script type="text/javascript">
        // Initialize the plugin with no custom options
        var $  j = jQuery.noConflict();
        $  j(document).ready(function() {
            //Default Action
            $  j(".tab_content").hide(); //Hide all content
            $  j("ul.tabs li:first").addClass("active").show(); //Activate first tab
            $  j(".tab_content:first").show(); //Show first tab content

            //On Click Event
            $  j("ul.tabs li").click(function() {
                $  j("ul.tabs li").removeClass("active"); //Remove any "active" class
                $  j(this).addClass("active"); //Add "active" class to selected tab
                $  j(".tab_content").hide(); //Hide all tab content
                var activeTab = $  j(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                $  j(activeTab).fadeIn(); //Fade in the active content
                return false;
            });
            $  j("#scroller").simplyScroll({
                speed: 25
            });
            $  j("#scroller2").simplyScroll({
                speed: 25
            });
        });
        $  j('.project').live('click',function(){
            newImg = $  j(this).attr('rel');
            $  j('img.projectImg').attr('src', newImg);
            hideLoading();
        });
        $  j('.vrtour').live('click',function(){
            newSwf = $  j(this).attr('rel');
            var newObjElement = '<object style="width:681px;height:511px;"><param name="movie" value="'+newSwf+'"><embed src="'+newSwf+'" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="681" height="511"></object>';
            $  j('#Swf').html(newObjElement);
            hideLoading();
        });
    </script>

And here’s the HTML:

<ul class="tabs">
        <li><a href="#tab1">PHOTOS</a></li>
        <li><a href="#tab2">VIRTUAL TOUR</a></li>
    </ul>
    <div class="tab_container">
    <div id="tab1" class="tab_content">

    <div id="photosItem">
                                    <!-- Item Image -->
                <div class="itemImageBlock" id="imageBox">
                    <span class="itemImage">
                        <img src="184b7cb84d7b456c96a0bdfbbeaa5f14_L.jpg" alt=" Posillipo 80 1997" style="width:681px; height:511px;" class="projectImg" />
                    </span>
                                                                </div>

                                    <div class="clr"></div>
            </div>
                                    <!-- Item image gallery -->
                    <a name="itemImageGalleryAnchor" id="itemImageGalleryAnchor"></a>
                    <div class="itemImageGallery">
                        <div id="gallery">
                        <ul id="scroller">
                            <li><img rel="IMG_3104.jpg" src="jwsigpro_cache_8d00638fe2img_3104.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
                            <li><img rel="IMG_3109.jpg" src="jwsigpro_cache_8d00638fe2img_3109.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>

                            <li><img rel="IMG_3133.jpg" src="jwsigpro_cache_8d00638fe2img_3133.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
                            <li><img rel="IMG_3136.jpg" src="jwsigpro_cache_8d00638fe2img_3136.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
                            <li><img rel="IMG_3156.jpg" src="jwsigpro_cache_8d00638fe2img_3156.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
                            <li><img rel="IMG_3159.jpg" src="jwsigpro_cache_8d00638fe2img_3159.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
                            <li><img rel="IMG_3164.jpg" src="jwsigpro_cache_8d00638fe2img_3164.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
                            <li><img rel="IMG_3169.jpg" src="jwsigpro_cache_8d00638fe2img_3169.jpg" alt="Click to open image!" title="Click to open image!" style="width:136px;height:92px;cursor:pointer" class="project" /></li>
                        </ul>
                        </div>
                    </div>

                        </div>
    </div>
    <div id="tab2" class="tab_content">
        <div id="photosItem">
                <div class="itemImageBlock" id="imageBox">
                    <span class="itemImage">
                    <div id="Swf">
                    <object width="681" height="511">
                    <param name="movie" value="Ferretti_165_main_saloon.swf">
                    <embed type="application/x-shockwave-flash" src="Ferretti_165_main_saloon.swf" width="681" height="511" class="projectSwf"></embed>

                    </object>
                    </div>
                    </span>
                 </div>
                 <div class="clr"></div>
                 <div class="itemImageGallery">
                        <div id="gallery">
                            <ul id="scroller2">
                                <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>

                                <li><img rel="example.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
                                <li><img rel="example.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
                                <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
                                <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
                                <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
                                <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
                                <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
                                <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>
                                <li><img rel="Ferretti_165_main_saloon.swf" src="deck.jpg" alt="Click to open 360!" title="Click to open 360!" style="width:136px;height:92px;cursor:pointer" class="vrtour" /></li>

                            </ul>
                        </div>
                    </div>
            </div>
    </div>

And here’s the demo page if you want to see it live:

http://www.cre8.gr/test/

I would greatly appreciate if anyone could help.

Thank you!

newest questions tagged jquery – Stack Overflow

i am new to jquery mobile and i have parsed the images using getJSON method as displayed below:
$ (document).ready(function(){
$ .getJSON(“http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?”,
function(data){
$ .each(data.items, function(i,item){
$ (“”).attr(“src”, item.media.m).appendTo(“#images”);
});
});
});

now i want to display these images in a image gallery.please help me.Any help will be appreciated.

newest questions tagged jquery – Stack Overflow

I want to create a photo gallery like http://mormon.org/people/find/ . I want the messy style. could someone give me some idea any framework and plugin can do the job?

newest questions tagged jquery – Stack Overflow

I am new to jquery/ajax stuff and I have really hard time trying to understand the concepts and how to integrate it into a rails 3 application. I saw some screencasts but I can’t figure how I can make what I want.

What I am trying to achieve is to load in a “gallery” div (in galleries/show.html.erb) several images. I am using Amazon S3 and it takes a bit of time to load these images fully. So I thought adding a spinner while images’re loading in the background could be nicer.

Here is my show action:

galleries/show.html.erb

<div class="main">
  <div id="ajax-status"></div>
  <div id="gallery"><%= render(:partial => "galleries/show.js") %></div>
</div>

1.) My first attempt was to render a js partial:

galleries/_show.js.erb

<%= render('galleries/gallery').html_safe %>

The partial is loaded correctly but I don’t know if it’s here I have to add my spinner (and how to load it)

2.) My second attempt was to load the partial in my application.js file:

$  (document).ready(function(){

    // Setup Ajax Callbacks
    $  ('body').ajaxStart(function() {
        $  ('#ajax-status').show();
    });
        $  ('body').ajaxStop(function() {
        $  ('#ajax-status').fadeOut();
    });
    $  ('body').ajaxError(function (event, xhr, ajaxOptions, thrownError) {
            console.log("XHR Response: " +  JSON.stringify(xhr));
    });

    // load gallery
    $  ('#gallery').load('...'); # Can I load a partial here?

});

So Here I have my spinner working (I hope!) But as I see it’s not possible to load partial in that way..

Thanks a lot for your help, it would help me to understand a lot!

newest questions tagged jquery – Stack Overflow

Just want to say first and foremost I appreciate any help on this. I’ve been kind of stuck all day.

So what I have now (http://itsdoom.com/tumblrstylewebsite.html)

is the newest thing I have been working on. its very rough as of now. But what I am having trouble with is the image gallery. If you click on ‘work’ it will scroll you down and you can see what I’m talking about. I wanted to have multiple albums so I placed the “Galleria” in an iFrame. with obvious problems. As I realize the way i have it setup now the Galleria / iframe is at 420px (h) x 820px (w), which looks good on the screen i’m working on now 1280×800, but if a user had a higher screen resolution, it would look too small, and with no ability to fullscreen the galleria, its a problem.

so I have a couple questions..

1. Is there anyway to make the Galleria fullscreen not only in the iframe but in the whole browser?

2. Is there anyway to either resize the iframe // content (Galleria) to reflect a users screen resolution?

If theres a way to fullscreen that would be the best option because someone with a higher resolution screen would just be able to hit that. if not, hopefully the other option is possible.

thanks again for the help.

newest questions tagged jquery – Stack Overflow

Question by parting of the sensory…: I want to build this “Galleria” style gallery, however, even with instructions I don’t know what to do with it?

http://galleria.aino.se/

This is what I am interested in. How do I create it? All I know is HTML and CSS. From all indications there is ‘jquery’ and ‘javascript’ etc, involved but I don’t even have the faintest idea where to begin using that.
Can I use my CSS page and make a new HTML page to make this? What goes where? I see they have the scripts on this page, but am unsure what should go where on my CSS and HTML page. The guys who wrote this obviously assumed people using this would somewhat know somewhat of what to do with it. Unfortunately I do not. Also, how do I incorporate JavaScript into the whole matter? Will there have be an entire different document/scripting for this? In essence, based on what I am trying to create (the galleria in the link above) could someone fill me in on all the details in regard to the scripting on the link as a step-by-step process to tell me what to put where?

Thank you.
No offense Moi, but your answer still does not indicate anything to me as to what I should do. If you go onto the site, sure it shows a lot of scripting but it does not say other important things like: open a notepad doc, save it as a .java (or whatever) place the lines that say (whatever it may) on your html in the body, etc. Thats what I need help with. Baby steps. I have been trying to get a gallery functioning for a couple weeks and it is holding up my website from launching.
Serious help only, please. I would certainly appreciate it.

Best answer:

Answer by Moi
Download the software and use this documentation: http://github.com/aino/galleria/tree/master/docs/ check out the “getting started” file it explains how to get it working…

“Get the latest and greatest version of Galleria and jQuery
Place the galleria src folder in your project.”

I believe you can copy/paste the codes they give you as long as you place the galleria src folder in your project. If you choose other folder you’ll need to modify the paths.

EDIT:

OK here we go with serious help

1. Download Galleria.

2. Extract the .zip file in your project. I just extracted the .zip inside the folder of my project, if you want to put it in other forder then just change the paths (I suppose you know how to do this) in the code I’m about to give you.

3. Copy this and paste it inside your HTML file (always do a backup).

-The code can go inside the BODY tag.

-Sorry but Y! won’t let me put the entire code, this is what is missing:

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js <-copy the entire address.
src/themes/classic/galleria.classic.js

4. Make a folder named img and put your images inside.

5. Locate the

code I just give to you and change the names of the images (pic1.jpg pic2.jpg) to match the names of the images inside the img folder.

6. Open your HTML file and enjoy Galleria.

You can make a .js file with the code and import it from your HTML file adding something like this inside your HTML file:

What do you think? Answer below!

]]> https://jqueryplugins.info/2011/09/i-want-to-build-this-galleria-style-gallery-however-even-with-instructions-i-dont-know-what-to-do-with-it/feed/ 0 https://jqueryplugins.info/2011/08/need-to-create-a-nice-gallery-for-webpage-help-not-going-too-hot/ https://jqueryplugins.info/2011/08/need-to-create-a-nice-gallery-for-webpage-help-not-going-too-hot/#comments Tue, 30 Aug 2011 15:04:47 +0000 Admin https://jqueryplugins.info/2011/08/need-to-create-a-nice-gallery-for-webpage-help-not-going-too-hot/ Post link: Need to create a nice gallery for webpage. Help! Not going too hot.?

Question by We Carried It All So Well…: Need to create a nice gallery for webpage. Help! Not going too hot.? Hello there, I am somewhat familiar with CSS and...

]]> Post link: Need to create a nice gallery for webpage. Help! Not going too hot.?

Question by We Carried It All So Well…: Need to create a nice gallery for webpage. Help! Not going too hot.?
Hello there,
I am somewhat familiar with CSS and HTML and used those to build all the pages to my webpage, which I plan to launch in the next couple days. The only page I have not created is the gallery, and not because I have not tried, but I do not know JavaScript-ing or anything really other than CSS. I am trying to find a free scripting generator or someone who would not mind giving me an outline to a script that I could put my images and words into. I have been walking through some Java tutorials, but unfortunately, even so, will not have enough time to learn in and still get it done in time. I was hoping to do something modern with my gallery and am intrigued by such things as the looks of: Zen Flash Gallery, GalleryView, SimpleViewer, Flash Photo Gallery, df Gallery, Art Flash Gallery, Flash Page Flip and Showcase Slideshow. One of my favorites in the Canvas Gallery with Reflection
Other scripting I would be interested to use is: MooTools, jQuery.
Anything nice enough will do. I did find one site that offered some help: http://visionwidget.com/inspiration/web/453-javascript-flash-photo-gallery.html.
Unfortunately, I am not savvy enough to figure out how to create a scipt with anything other than CSS or to put such things like JavaScript files into my CSS files to link them so that the Java works. So, any additional advice or just flat out scripting of how I would do that and on which files I would put things (css or my html).
Thanks for your patience and help. I appreciate it, as this is the first thing I have ever attempted in this realm.
I understand how to upload photos, but would like a gallery, because it is for my business I am trying to start and cannot have it looking shabby.

Best answer:

Answer by TheDarkLaith
I think you could do it quite nicely with flash if you don’t mind. If you’re interested mail me from the profile page.

Give your answer to this question below!

]]> https://jqueryplugins.info/2011/08/need-to-create-a-nice-gallery-for-webpage-help-not-going-too-hot/feed/ 4 https://jqueryplugins.info/2011/08/photo-gallery-10-building-the-footer/ https://jqueryplugins.info/2011/08/photo-gallery-10-building-the-footer/#comments Thu, 25 Aug 2011 13:07:03 +0000 Admin https://jqueryplugins.info/2011/08/photo-gallery-10-building-the-footer/ Post link: Photo Gallery #10: Building the Footer

Click here for Links Support Topic – www.mattsaundersmcp.co.uk Twitter – www.twitter.com Facebook Page – www.facebook.com My Website for more tutorials – www.mattsaundersmcp.co.uk Video Rating: 0 / 5

]]> Post link: Photo Gallery #10: Building the Footer

Click here for Links Support Topic – www.mattsaundersmcp.co.uk Twitter – www.twitter.com Facebook Page – www.facebook.com My Website for more tutorials – www.mattsaundersmcp.co.uk
Video Rating: 0 / 5

]]> https://jqueryplugins.info/2011/08/photo-gallery-10-building-the-footer/feed/ 0 https://jqueryplugins.info/2011/08/slide-gallery-with-jquery/ https://jqueryplugins.info/2011/08/slide-gallery-with-jquery/#comments Fri, 19 Aug 2011 19:19:34 +0000 Admin https://jqueryplugins.info/2011/08/slide-gallery-with-jquery/ Post link: slide gallery with jQuery

slide gallery with jQuery tutorial tympanus.net not work in ie6. Video Rating: 0 / 5

]]> Post link: slide gallery with jQuery

slide gallery with jQuery tutorial tympanus.net not work in ie6.
Video Rating: 0 / 5

]]> https://jqueryplugins.info/2011/08/slide-gallery-with-jquery/feed/ 0 https://jqueryplugins.info/2011/08/what-is-the-easiest-way-of-doing-a-photo-gallery-with-variable-size-thumbnails/ https://jqueryplugins.info/2011/08/what-is-the-easiest-way-of-doing-a-photo-gallery-with-variable-size-thumbnails/#comments Fri, 19 Aug 2011 18:14:00 +0000 Admin https://jqueryplugins.info/2011/08/what-is-the-easiest-way-of-doing-a-photo-gallery-with-variable-size-thumbnails/ Post link: What is the easiest way of doing a photo gallery with variable size thumbnails?

I would like to create a gallery like Google+ “Photos From Your Circles” in which the thumbnails looks like a collage. Thumbnails keeps the aspect ratio of the photo. Gallery...

]]> Post link: What is the easiest way of doing a photo gallery with variable size thumbnails?

I would like to create a gallery like Google+ “Photos From Your Circles” in which the thumbnails looks like a collage.

• Thumbnails keeps the aspect ratio of the photo.
• Gallery rows are close in height (not equal but very close).
• Spacing between thumbnails is equal everywhere.
• The gallery fills in a rectangle.
• Photos are not cropped. They’re just resized to fill in the space.

Please see the screenshot as example:
http://ansonalex.com/wp-content/uploads/2011/07/google-plus-gallery-large.jpg

i would like to learn how can i use css/javascript/jquery to style gallery thumbnails like this at the client side programatically.

Thank you for answers!

newest questions tagged jquery – Stack Overflow

]]> https://jqueryplugins.info/2011/08/what-is-the-easiest-way-of-doing-a-photo-gallery-with-variable-size-thumbnails/feed/ 0