...

View Full Version : JQuery plugin, positioned using CSS **HELP!!**



sterumbelow
05-13-2010, 11:39 PM
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 (http://themeforest.net/item/unibox-html-version/full_screen_preview/99769)

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:

http://img194.imageshack.us/img194/9292/screenshot20100513at233.png

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.


<!-- 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 -->

sterumbelow
05-14-2010, 06:34 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum