Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Click On Image Pops Link In New Window / Showing SWF File In Gallery

    For my website, I'm currently using ColorBox to show off my photo gallery on my website:
    http://colorpowered.com/

    The one thing I want is for the image being displayed in the gallery clickable so it can lead to the actual website in a new window. I have tried using the onclick=window.open() function in the PHP and in the image tag, but that only causes the website to open at the same time the gallery opens.

    Here is the picture I would like to have click to the website in a new window HTML code:
    Code:
    <a href="images/portfolio/tmc.jpg" rel="portfolio" title="Thompson • McClellan: Commercial Photographers website design"><img src="images/portfolio/tmc_thumb.jpg" class="tmc" alt="" /></a>
    And the PHP/JavaScript:
    Code:
    $(document).ready(function(){
    	$("a[rel='portfolio']").colorbox({current: "", width:"75%", height:"75%", title:""});
        $('#portfolio_content a[rel="portfolio"]').hover(
            function() {
                $(this).animate({opacity: 1}, 250);
            },
            function() {
                $(this).animate({opacity: 0.5}, 250);
            }
        ).css('opacity', 0.5);
    	$("a[rel='portfolio'] .tmc").colorbox({href: "http://www.thompson-mcclellan.com"});
    });
    Also, I'm trying to get a SWF file I created to show up in the ColorBox gallery. If anyone has any suggestions, any help is appreciated!

    Here is the website so far:
    http://abrielshipley.com/portfolio/index.html

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Here is the picture I would like to have click to the website in a new window HTML code...
    You just want to click on the image and have it open the website in a new window? No need for javascript:

    Code:
    <a href="http://websiteaddress.com" target="_blank" rel="portfolio" title="Thompson • McClellan: Commercial Photographers website design"><img src="images/portfolio/tmc_thumb.jpg" class="tmc" alt="" /></a>
    Is that what you mean? This is not valid in X/HTML strict - in that case you either need to use a javascript solution to add the target attribute or accept some validation errors.

    Re SWF file, never tried it in Colorbox - what happens?

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    You just want to click on the image and have it open the website in a new window? No need for javascript:

    Code:
    <a href="http://websiteaddress.com" target="_blank" rel="portfolio" title="Thompson • McClellan: Commercial Photographers website design"><img src="images/portfolio/tmc_thumb.jpg" class="tmc" alt="" /></a>
    Is that what you mean? This is not valid in X/HTML strict - in that case you either need to use a javascript solution to add the target attribute or accept some validation errors.
    Well, what I mean by this is when you click on the thumbnail,
    <img src="images/portfolio/tmc_thumb.jpg" class="tmc" alt="" />

    it should link up to the picture in which I want to show,
    <a href="images/portfolio/tmc.jpg" rel="portfolio" title="Thompson • McClellan: Commercial Photographers website design">

    since this is the image that will show up in the ColorBox gallery. I want the image that shows up in the image gallery to be clickable so the user will be able to open a new window to the link http://websiteaddress.com" [COLOR="Red"]

    Re SWF file, never tried it in Colorbox - what happens?
    What happens in the ColorBox is that it opens up, showing just a blank gallery page. I bet it has something to do with the inline CSS.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    So clicking on the colorbox image takes you to the website? Then you need to wrap that image with an anchor tag with target="_blank" as my previous post.

    Is the problem colorbox "Plaque Animation"? If so Firebug shows this as having this:

    Code:
    <div id="cboxLoadedContent" style="display: block; width: 937px; overflow: auto; height: 180px;">Request unsuccessful: Not Found</div>

  • #5
    New Coder
    Join Date
    Jan 2010
    Posts
    35
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'm sorry to confuse you. I think what you're interpreting is that I want the thumbnail to pop open the website in a new tab/window. Actually, I want the image, images/portfolio/tmc.jpg (which will be displayed inside of the gallery) to open a new tab/window to the website instead of leading to the next image in the slideshow. I'm continuing to work on that.

    Quote Originally Posted by SB65 View Post
    Is the problem colorbox "Plaque Animation"? If so Firebug shows this as having this:

    Code:
    <div id="cboxLoadedContent" style="display: block; width: 937px; overflow: auto; height: 180px;">Request unsuccessful: Not Found</div>
    As for this, I wonder if it means it should include a div. In the example page for the ColorBox, it says that it I should declare something like this for the JQuery:
    Code:
    $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});
    with the HTML like this:
    Code:
    <p><a class='example6' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0" title="The Knife: We Share Our Mother's Health">Flash / Video (Iframe/Direct Link To YouTube)</a></p>
    Right now, I have something like this for my JQuery (trying both everything):
    Code:
    $("a[rel='portfolio'] .plaque").colorbox({inline: true, iframe: true, innerWidth:425, innerHeight:344});
    and HTML:
    Code:
    <a class="plaque" href="../animations/plaque/plaque.html" rel="portfolio" title="Plaque Animation"><img src="images/portfolio/image_thumb.jpg" alt="" /></a>
    For a better understanding of how this works, here is the example page I'm talking about:
    http://colorpowered.com/colorbox/cor...le1/index.html


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •