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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JQuery plugin, positioned using CSS **HELP!!**

    Hey guys,

    First post here! In need of some help!

    Here's the story....

    I've got a gallery on my site, with filters/re-ordering capabilities. Using the JQuery plugin 'quicksand'. All working nicely.

    In addition to that, I'm using the 'fullsize' JQuery plugin. But I'm having a few problems.

    The fullsize plugin essentially adds a 'fullsize' arrow to the top of the images, which, when clicked, opens up the image in a larger size. I'm looking to get the image to open inline with the website, over the top of the images.

    As can be seen here, with this template on the 'works' page:

    Click Here

    Essentially what my website is doing is placing the fullsize image elsewhere on the page. I've tried using various negative margins to budge it across, but this doesn't work in Firefox. I've tried various types of positions - relative, absolute etc. But I'm struggling.

    The files that allow this to run are as follows:

    index.html
    layout.css
    fullsize.css
    jquery.fullsize.js

    There is nothing in the fullsize javascript file that is affecting this. It's simply all down to the fullsize.css file and maybe my layout.css. I've taken a screenshot of the problem:



    That black image should be aligned along the bottom of the green horizontal bar.

    I've attached the various files, incase you need to look at them! And below is the section of the index where the gallery is placed.

    Thanks, I hope you can help!

    Ste.

    Code:
    <!-- Begin Design Page -->
    <div class="panel" id="three" >
    <div class="panel-wrapper">            
    <div class="designshow">
    <h4 class="second">Guru Design</h4>
    
    					
    <div class="section-content-full">	
    <div class="scroll">
    
    						<!-- Filter Panel / Use a maximum of 4 data value fields -->
    						<ul class="splitter">
    							<li class="segment-0 selected-0"><a href="#" data-value="all"><strong>All</strong></a></li>
    							<li class="segment-1"><a href="#" data-value="website"><strong>Website</strong></a></li>
    							<li class="segment-3"><a href="#" data-value="app"><strong>Application</strong></a></li>
    							<li class="segment-2"><a href="#" data-value="identity"><strong>Branding</strong></a></li>
    							<li class="segment-4"><a href="#" data-value="illustration"><strong>Illustration</strong></a></li>
    						</ul>
    						<!-- //Filter Panel -->
    
    						<!-- Gallery -->
    						<ul id="list" class="image-grid">
    							<li data-id="id-1"  data-type="website"><div class="ph"><img width="176" height="93px" src="images/portfolio/work_image_example_thumb.jpg" alt="" longdesc="images/portfolio/work_image_example.jpg" class="load" /></div><div><strong>Client,</strong> <span data-type="project-name">Project Name</span></div></li>
    							<li data-id="id-2"  data-type="website"><div class="ph"><img width="176" height="93px" src="images/portfolio/work_image_example_thumb.jpg" alt="" longdesc="images/portfolio/work_image_example.jpg" class="load" /></div><div><strong>Client,</strong> <span data-type="project-name">Project Name</span></div></li>
    							<li data-id="id-3"  data-type="identity"><div class="ph"><img width="176" height="93px" src="images/portfolio/work_image_example_thumb.jpg" alt="" longdesc="images/portfolio/work_image_example.jpg" class="load" /></div><div><strong>Client,</strong> <span data-type="project-name">Project Name</span></div></li>
    							<li data-id="id-4"  data-type="illustration"><div class="ph"><img width="176" height="93px" src="images/portfolio/work_image_example_thumb.jpg" alt="" longdesc="images/portfolio/work_image_example.jpg" class="load" /></div><div><strong>Client,</strong> <span data-type="project-name">Project Name</span></div></li>
    						</ul>
    						<!-- //Gallery -->				        
    					
    </div>
    </div>
    </div>
    </div>
    </div>
    <!-- End Design Page -->
    Attached Files Attached Files

  • #2
    New to the CF scene
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Guys, if you could help me, that'd be brilliant.

    I'm sure it isn't hard, but I've got a complete mind-blank on the whole situation!


  •  

    Posting Permissions

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