Results 1 to 4 of 4

Thread: Conflict between twitter-bootstrap 2.2.2 css file and zoomer files

  1. #1
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Conflict between twitter-bootstrap 2.2.2 css file and zoomer files

    1) Script Title: Featured Image Zoomer

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

    3) Describe problem: conflict between twitter-bootstrap 2.2.2 css file and zoomer files .


    First of all well done for your script that looks amazing. Unfortunately when i use it with bootstrap css file there is a conflict and the hd picture is put out of shape (see attachment) .

    if i remove the bootstrap css file things work fine .

    I m a noob with jquery and i have no idea what to do.

    Help very much appreciated.

    Click image for larger version. 

Name:	Capture d’écran (8).jpg 
Views:	180 
Size:	12.7 KB 
ID:	5121

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    It appears to be a simple problem of max-width: 100%; being applied to all images by bootstrap - pretty presumptuous if you ask me. Using a text only editor like NotePad, add this to the multizoom.css file:

    Code:
    .magnifyarea img {
    	max-width: none;
    }
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    it works !

    Thanks a lot John for your quick and precise answer.

    By the way I had also commented out jQuery.noConflict() on multizoom.js

    Have a good week end.
    Last edited by jscheuer1; 06-29-2013 at 10:23 AM. Reason: Format

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    Thanks, you have a good weekend too.

    That jQuery.noConflict() is really optional. More recent DD scripts don't use it. Although this one has been updated (by me in this case) recently, I just kept it in there, for no particular reason. I guess it could be for backward compatibility though - if I needed an excuse for keeping it. It's only needed if there are one or more conflicts with other scripts on the page requiring use of the $ variable. It (noConflict mode) can even cause problems if other jQuery code on the page cannot operate in a no conflict environment.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Question about Image Zoomer jquery.min.js file
    By TedK in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-08-2013, 04:03 PM
  2. Need help with Twitter Bootstrap Carousel
    By katiebugla in forum Other
    Replies: 1
    Last Post: 10-16-2012, 10:16 PM
  3. Hover Menu, Show/Hide Div, Bootstrap Tab
    By chronixx in forum CSS
    Replies: 1
    Last Post: 06-15-2012, 06:34 AM
  4. Lightbox conflict with another jquery files.
    By mariana villas boas in forum JavaScript
    Replies: 4
    Last Post: 12-01-2011, 01:05 AM

Bookmarks

Posting Permissions

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